Stagger Grid Reveal

Directional entrance animations with grid-aware stagger patterns

01

Basic Grid Reveal

Default stagger from top-left with slide animation. Scroll down and back up to re-trigger.

01
02
03
04
05
06
07
08
09
10
11
12
02

Direction Showcase

Click a direction to see the wave pattern change. The stagger calculates timing based on grid position.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
03

Animation Styles

Same grid, different animation styles. Each style has unique initial and final states.

01
02
03
04
05
06
07
08
09
10
11
12
04

Portfolio Grid + Hover Tilt

Real-world example with images and hover parallax tilt effect. Items reveal with scale animation from center.

01
Brand Identity Branding
02
E-Commerce Web Design
03
Mobile App UI/UX
04
Dashboard Product
05
Marketing Site Web Design
06
Icon System Illustration
05

Scroll Re-trigger

Items reveal as you scroll into view, then hide when you scroll back up. Uses blur animation from edges.

A1
A2
A3
A4
B1
B2
B3
B4
C1
C2
C3
C4
D1
D2
D3
D4