GSAP 3 scrollTrigger QuickStart

Below is a basic ScrollTrigger config.

gsap.registerPlugin(ScrollTrigger);

gsap.from('.herman', {
  duration: 10,
  x: '-50vw',
  rotation: -360,
  ease: 'linear',
+  scrollTrigger: {
+    trigger: '.herman', // trigger target
+    markers: true,  // for dev only
+    start: 'top 75%', //when top of herman passes 75% viewport height
+    end: 'bottom 25%', //when bottom of herman passes 25% viewport height
+
+    //events: onEnter onLeave onEnterBack onLeaveBack
+    toggleActions: 'restart complete reverse reset',
+    //options: play, pause, resume, reset, restart, complete, reverse,none
  },
});

1. First let's scroll down, when .herman target's top passes 75% viewport height, triggering onEnter event, which will restart the animation.
2. Continue to scroll down, when the bottom of target passes 20% viewport height, triggering onLeave event, which will complete the animation.
3. If scrolling up, onEnterBack will be triggered, the animation will reverse.
4. Continue to scroll up, everything will be reset.