Page transition

Grid Shutter Page Transition

by Vanguardia · motionprompts.dev

Page transition where a fixed 4x16 grid of cream blocks scales in horizontally with a per-block stagger, even rows sweeping from the left and odd rows from the right, shuttering the viewport closed before the page swaps and the same animation reverses to reveal the new page. Triggered by clicking the top navbar links routing between three full-viewport hero pages.

Type: Web motion
Framework: GSAP
Trigger: click
Duration: 0.25–0.6s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power3
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap

row-alternating scaleX shutter closes then reopens: 4 bands of 16 blocks, transform-origin left on even rows and right on odd rows, each band wiping from its own edge with a 0.025s per-block stagger under power3.inOut; all 4 rows fire together at '<', so a full close (or open) takes ~0.975s

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev18,405 charsCustomize

# Grid Shutter Page Transition (scaleX row-shutter cover-and-reveal)

## Goal
Build a client-side "fake router" for a small three-page site where **navigating b…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.