Grid Shutter Page Transition
What it does
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.
How it's built
| Category | transition |
|---|---|
| Tech | gsap |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# 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 between pages plays a full-screen 4×16 grid of cream blocks that scale open horizontally to shutter the viewport closed, swaps the page content underneath while covered, then scales the same blocks back down to reveal the new page**. The star effect is the two-phase `scaleX` shutter: a fixed grid of blocks whose rows animate concurrently but with **alternating sweep direction** — even rows grow anchored to the left edge sweeping left→right, odd rows grow anchored to the right edge sweeping right→left — each row carrying its own per-block stagger. Trigger is a click on the fixed top navbar links.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) only — **no GSAP plugins, no ScrollTrigger, no SplitText, no Lenis**. There is no scroll interaction at all. Import as:
```js
import gsap from "gsap";
```
No `gsap.registerPlugin` call is needed.
## Layout / HTML
```
.transition-grid (fixed full-viewport overlay; JS fills it with blocks — starts EMPTY)
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
Learn the technique
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.