Page transition

Block Reveal Page Transition

by Vanguardia · motionprompts.dev

Page transition where a fixed fullscreen grid of 60px black blocks flickers in with a random stagger to cover the viewport, the page content swaps behind it, then the blocks fade back out to reveal the new page. Triggered by clicking the bottom nav links that route between four full-viewport sci-fi sections.

Type: Web motion
Framework: GSAP
Trigger: click
Duration: 0.05–0.05s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

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

random-stagger block curtain covers then reveals page: 60px grid blocks each flip opacity in 0.05s power2.inOut, randomized across a 0.5s window, 0.3s hold covered, then the same random 0.5s dissolve out

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev17,643 charsCustomize

# Block Reveal Page Transition (pixel-grid flicker cover-and-reveal)

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

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.