Scroll Fade

Lesson 1

Elements start invisible (opacity: 0, y: 32px) in CSS. gsap.utils.toArray() selects all .fade-item elements and creates an individual gsap.to() tween with its own scrollTrigger for each — so each item has an independent trigger. start: 'top 85%' fires when the element’s top edge is 85% down the viewport.

Source Code script.js

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.fade-item').forEach((el) => {
  gsap.to(el, {
    opacity: 1,
    y: 0,
    duration: 0.7,
    ease: 'power2.out',
    scrollTrigger: {
      trigger: el,
      start: 'top 85%',
    },
  });
});