Page transition

JS Page Transitions

by Vanguardia · motionprompts.dev

A full-screen curtain page transition: clicking a nav link runs a GSAP tween that scales a 2x5 grid of purple blocks up on the Y axis (power4.inOut, staggered per column) to cover the viewport, swaps the hero heading, then scales the blocks back down to reveal the incoming page. The same reveal also plays on initial load.

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

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

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

staggered 2x5 block curtain scaleY cover/reveal — 1s power4.inOut per block, 0.1s per-column offset (axis x), top-origin top row / bottom-origin bottom row, ~1.4s per phase

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev18,024 charsCustomize

# JS Page Transitions (scaleY split-curtain cover-and-reveal)

## Goal
Build a small single-page site with an **in-page router** where **navigating between "pag…

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.