Stagger

Lesson 3

gsap.to('.card', { stagger: 0.1, scrollTrigger: { trigger: '.grid' } }) drives all .card elements with a single ScrollTrigger on the parent .grid. stagger: 0.1 adds a 0.1s delay between each card’s start time. Cards cascade in one after another from a single viewport-entry event.

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%',
  },
});