Silhouette Page Transition
What it does
Full-page route transition where clicking a nav link runs a GSAP timeline that wipes 20 vertical blocks across the screen (scaleX stagger), then draws an SVG logo via strokeDashoffset and fills it before the incoming page is revealed with a reverse block wipe. Page headings animate in with a SplitText masked-character stagger and the archive route uses Lenis smooth scroll.
How it's built
| Category | transition |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger, SplitText |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
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.
# Silhouette Page Transition — Block Wipe + SVG Logo Draw
## Goal
Build a minimal editorial multi-page demo ("Silhouette") with a cinematic **full-page route transition**: clicking a nav link makes 20 vertical dark blocks wipe across the screen left→right (staggered `scaleX`), then a full-screen dark overlay appears where a line-art logo **draws itself** via `strokeDashoffset` and fills in; the overlay fades, the new page is swapped in underneath, and the blocks wipe away right→left to reveal it. Page headings animate in with a **SplitText masked character reveal**, and the archive route scrolls with **Lenis** smooth scroll. There is no real navigation — a tiny fake client-side router swaps innerHTML.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugins **`SplitText`** and **`ScrollTrigger`**, and **`lenis`** (npm) for smooth scroll on one route. Register with `gsap.registerPlugin(SplitText, ScrollTrigger)`. Initialize on `DOMContentLoaded` (or immediately if the document is already ready).
## Layout / HTML
Class names and ids are load-bearing — the JS/CSS query them:
```
<nav>
<div class="nav-logo"><a href="/">Silhouette</a></div>
<div class="nav-links">
<a href="/">Index</a>
…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.