Scroll Reveal Grid — Free GSAP ScrollTrigger Staggered Grid

The scroll reveal grid is the portfolio or feature grid where cards lift up and fade in one after another as the section scrolls into view, instead of appearing all at once — the polished entrance on agency and product pages. This snippet builds it with GSAP and ScrollTrigger (from a CDN), plus a responsive CSS grid.

One tween, many cards

A single gsap.from animates every card from y: 60 and opacity: 0 up to its resting state. Using from means GSAP records each card's natural position, animates it out of that offset state, and lands it exactly where the CSS grid placed it — so you never hard-code final positions, and the reveal works no matter how the responsive grid wraps.

Grid-aware stagger

The magic is stagger: { each: 0.08, grid: 'auto', from: 'start' }. With grid: 'auto', GSAP reads the cards' actual row-and-column layout and offsets each card's start time based on its position, producing a diagonal wave that ripples across the grid rather than a flat left-to-right list. each: 0.08 sets the gap between cards; from: 'start' begins the wave at the top-left. This is the difference between a generic fade and a reveal that feels choreographed to the layout.

Triggered once, reversible

The ScrollTrigger fires at start: 'top 75%' — when the grid's top reaches 75% down the viewport, so the cards begin revealing just before they're fully in view. toggleActions: 'play none none reverse' plays the entrance on the way in and reverses it if you scroll the grid back out of view, so re-entering replays it cleanly without a manual reset.

Smooth, GPU-friendly motion

The animation only touches transform (the y offset) and opacity, both composited on the GPU, with power3.out easing so each card decelerates as it settles. will-change on the cards hints the compositor. Because nothing reflows, even a large grid reveals without jank.

Responsive grid underneath

The grid uses repeat(auto-fill, minmax(220px, 1fr)), so it reflows from one to several columns by width — and the grid-aware stagger adapts automatically, since it reads the live layout each time. The cards use aspect-ratio so they stay proportional at any column count.

Customizing it

Change the rise distance, the stagger spacing or origin ('center', 'edges'), the easing, or the trigger point; swap from for a scale or blur entrance. Pair it with feature cards, a portfolio filter grid, or stagger list.