scrollMagic + gsap

<!-- tweenMax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<!-- scroll magic -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>

 $(document).ready(function () {
    // section : Pre-Register (scrollmagic)
    var controller = new ScrollMagic.Controller();
    var tl01 = new TimelineMax();
    var subChar1 = TweenMax.fromTo(
      "#char01",
      0.5,
      { opacity: 0, left: "-250px", ease: Circ.easeOut },
      { opacity: 1, left: "31px", ease: Circ.easeIn }
    );
    tl01.add([subChar1]);

    var scene = new ScrollMagic.Scene({
      triggerElement: "#char01",
    })
      .setTween(tl01)
      .addTo(controller);

    var tl02 = new TimelineMax();
    var subChar2 = TweenMax.fromTo(
      "#char02",
      0.5,
      { opacity: 0, right: "-250px", ease: Circ.easeOut },
      { opacity: 1, right: "39px", ease: Circ.easeIn }
    );
    tl02.add([subChar2]);

    var scene2 = new ScrollMagic.Scene({
      triggerElement: "#char02",
    })
      .setTween(tl02)
      .addTo(controller);
  });

🙋🏻‍♂️ 결과는 회사컴으로 밖에 못봐서 나중에 꼭 추가할 것!!