Stagger Reverse

Lesson 14

Same as the stagger demo with toggleActions: 'play none none reverse' on the single ScrollTrigger. When you scroll back up past the grid’s trigger point, all cards reverse their entrance in the opposite stagger order. Duration and ease are identical in both directions.

Source Code script.js

gsap.registerPlugin(ScrollTrigger);

gsap.to('.card', {
  opacity: 1,
  y: 0,
  stagger: 0.1,
  duration: 0.6,
  ease: 'power2.out',
  scrollTrigger: {
    trigger: '.grid',
    start: 'top 85%',
    toggleActions: 'play none none reverse',
  },
});