Scroll Fade Reverse

Lesson 13

Identical to the basic scroll fade, but with toggleActions: 'play none none reverse' added. The fourth value 'reverse' means the animation plays backward when the element scrolls back above the trigger point — fading it back out. Each scroll-down replay restarts from the hidden state.

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%',
      toggleActions: 'play none none reverse',
    },
  });
});