Every card in the grid?

A stagger across the first row can work. Staggering 24 cards means the last one arrives after people have started scrolling again.

Reveal fades or slides the whole unit. Mask uncovers it through a crop.

What does reduced motion do?

The block is just there. No fade, no slide.

Element reveal

An element reveal brings a whole block onto the page as it enters the viewport: a card, an image, a section, the unit rather than the words inside it.

ScrollBuild difficulty: EasyScrollTrigger

Also called Fade up, Scroll reveal, Fade in on scroll, Block reveal, Stagger in.

Here it is working.

Three cards land in order. Play again to see the stagger.

For designers

You reach for this when a group of cards, a figure, or a quiet section should arrive rather than being there from the first paint. One block, or a short stagger across a row, is plenty. A page that reveals every heading, card and caption is a page that never sits still. The neighbour is Text reveal, which is for the line itself, and Mask reveal, which is for a crop. If you want both, pick one per block.

Use this when

The block is a card, image, quote or section, and arriving helps it get noticed.
The motion finishes quickly, and the block is then still.
You can start it when the block enters, usually once.
Reduced motion can show the block in its final state from the first paint.

Reach for something else when

The words are the thing people came for. Use Text reveal.
You want a crop, wipe or fold to uncover the block. Use Mask reveal.
You want a number to tick. Use Counter.
You want a stroke to draw itself. Use SVG draw path.
You want depth as they move, not an arrival. Use Parallax.

How to build it

Keep the block in the document at its final size. Hide it visually (opacity, a small Y shift), not by removing it, so layout does not jump when it arrives. Play a short tween when the block enters: opacity, a few pixels of Y, maybe a stagger of 40 to 80 milliseconds across a row. ScrollTrigger handles the start. Once is the default. Do not start from a large Y offset. 12 to 24 pixels is enough to feel. On reduced motion, show the finished block. Do not leave opacity at 0 waiting for a trigger that never fires.

Official GSAP

ScrollTrigger + stagger.

gsap.from('.card', {
  autoAlpha: 0, y: 20, stagger: 0.1, duration: 0.6,
  scrollTrigger: { trigger: '.card', start: 'top 85%' },
});

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Every card in the grid?: A stagger across the first row can work. Staggering 24 cards means the last one arrives after people have started scrolling again.
Once, or every time it enters?: Once.
Reveal or mask?: Reveal fades or slides the whole unit. Mask uncovers it through a crop.
What about images that load late?: Size them first.
What does reduced motion do?: The block is just there. No fade, no slide.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Background colour