JAVASCRIPT

scrolltrigger gsap cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.5/ScrollTrigger.min.js"></script>

gsap pin scrolltrigger

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.layer').forEach(layer => {
  ScrollTrigger.create({
    trigger: layer,
    pin: true,
    start: 'top top',
    pinSpacing: false,
  });
});

gsap scrolltrigger cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>

gsap scrolltrigger

//Query all your html elements to animate them independently 
document.querySelectorAll('.css-selector')?.forEach(elem => {
 
  let tl = gsap.timeline({
	//Scroll triggers params
    scrollTrigger: {
      markers: true, //false to disable
      start: 'top center', // Top left (top) is the start marker for the targeted element. Top right (center) is the start marker for the scroller (viewport) 
      end: 'bottom 30%',  // Bottom left (bottom) is the end marker for the targeted element. Bottom right (30%) is the end marker for the scroller (viewport)
      trigger: elem, //Targeted elemet which we'll put our markers on (result of our selector all)
      scrub: false, //Links the progress of the animation directly to the scrollbar (true to enable it).
      once: true,//Animating only one time (false to disable)
    }
  })

  //Tweening
  tl.fromTo(elem, {
  	x: 100,
  }, {
  	x: 0,
  });

  /* you can add more 'to'. they will animate when the fromTo has ended
  tl.to(elem, {
  	y: 100,
  });
 */


})