Soft fade In

Do this only if you really want to do this yourself. I prefer Animate on Scroll but these work well too as another alternative if you like the class-based approach.

.softfade-in {
  opacity: 0;
  &.fade-and-move-in {
    opacity: 1;
    transform: translate(0px, 0px) scale(1) !important;
  }

  transition: opacity 0.6s, transform 0.6s, scale 0.6s;
  &.offset-a {
    transition-delay: 0.1s;
  }
  &.offset-b {
    transition-delay: 0.9s;
  }

  &.from-left{
    transform: translate(-500px, 0px);
  }

  &.from-right{
    transform: translate(500px, 0px);

  }

  &.from-below{
    transform: translate(0px, 500px);
  }

  &.from-top{
    transform: translate(0px, -500px);
  }

  @media screen and (max-width: 767px) {
    &.from-left{
      transform: translate(-97vw, 0px);
    }

    &.from-right{
      transform: translate(97vw, 0px);

    }
  }
}

These also have an observer that go along with them.

const softFadeEffect = () => {
    const callback = (arr, appearOnScroll) => {
        arr.forEach((entry) => {
            if (!entry.isIntersecting) {
                return
            } else {
                entry.target.classList.add(`fade-and-move-in`);
                appearOnScroll.unobserve(entry.target)
            }
        })
    }
    const appearOnScroll = new IntersectionObserver( callback, {
        root: null,
        rootMargin: '0px',
        threshold: 0
    })

    let targets = document.querySelectorAll('.softfade-in');
    targets.forEach((target) => {
        appearOnScroll.observe(target);
    })
}

export default softFadeEffect;