Scroll down to see grids and lists stagger into view when their container enters the viewport.
Feature grid
Scroll-driven
The parent container is the ScrollTrigger. All children share the same entry point.
Stagger delay
Each child starts 0.08s after the previous. Feels natural, never mechanical.
From-state only
GSAP animates from the defined state to the element's natural CSS position.
Any children
Works on cards, list items, table rows, avatar stacks — any repeated element.
One GSAP call
gsap.from('.child', { stagger, scrollTrigger: { trigger: '.parent' } })
Plays once
toggleActions: "play none none none" — fires on enter, never reverses.
List example