ScrollMagic

by yshrkn

HTML

<div class="target"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

<p class="js-anim-right-to-left">fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, </p>
<p class="js-anim-right-to-left">fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, </p>
<p class="js-anim-right-to-left">fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, </p>
<p class="js-anim-right-to-left">fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, </p>
<p class="js-anim-right-to-left">fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, </p>
<p class="js-anim-right-to-left">fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, </p>
<p class="js-anim-right-to-left">fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, </p>

SCSS

body {
  height: 2000px;
}

.js-anim-right-to-left {
    position: relative;
    opacity: 0;
    transform: translate(0, 40px);
    transition: all 1s cubic-bezier(0.155, 0.910, 0.695, 0.950);
    &.is-animation {
        opacity: 1;
        transform: translate(0, 0);
    }
}

JavaScript

class ScrollFade {
  constructor() {
    this.ANIMATION_CLASS = 'is-animation';

    const $targets = $('.js-anim-right-to-left:not(.this.ANIMATION_CLASS)');
    if (!$targets.length) {
      return;
    }

    const controller = new ScrollMagic.Controller();

    for (let i = 0; i < $targets.length; i++) {
      let scene = new ScrollMagic.Scene({
          triggerElement: $targets[i],
          triggerHook: 'onEnter',
          reverse: false,
          offset: 100
        })
        .addIndicators()
        .addTo(controller);

      scene.on('enter', () => {
        $targets[i].classList.add(this.ANIMATION_CLASS);
      });
      
      scene.on('end', () => {
        scene.destroy(true);
      });
    }
  }
}

new ScrollFade();