Silhouette Page Transition

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>
    <a href="/archive">Archive</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

<div class="transition-overlay" id="transition-overlay"></div>   <!-- empty; 20 .block divs injected by JS -->

<div class="logo-overlay" id="logo-overlay">
  <div class="logo-container">
    <svg id="logo" width="160" height="160" viewBox="-4 -4 133 136" fill="none">
      <path d="M82.6306 0C79.8604 5.32092 74.9984 15.6531 72.43 24.0313C80.497 18.2644 89.0129 13.5149 97.6896 10.449C93.9825 17.5694 87.0092 32.5146 84.7598 42.5941C93.0521 37.1488 101.702 32.6834 110.474 29.7215C105.427 39.0923 95.1513 60.5111 94.4257 71.2193C83.5883 74.5743 52.906 88.8011 18.5906 118.443C25.5824 101.301 45.556 73.6638 70.6591 53.0204C57.6282 59.6057 38.4488 71.4317 17.8355 89.7486C22.896 76.8262 36.1412 57.0952 53.4438 40.1036C42.5167 46.1741 28.2058 55.6353 13 69.1471C20.7367 49.3908 50.4126 11.3841 82.6306 0Z"
        fill="none" stroke="#e3e4d8" stroke-width="1.5"
        stroke-linecap="round" stroke-linejoin="round" />
    </svg>
  </div>
</div>

<div id="page-content"></div>   <!-- fake router injects the current route's markup here -->

The logo is a single continuous <path> — an abstract flame/leaf-like silhouette of swooping strokes (use the exact path data above so the stroke-draw reads the same; if you must substitute, it MUST remain one single <path> because the draw effect relies on path.getTotalLength()).

Routes (JS object, keyed by pathname)

"/"         → <div class="container"><div class="page-header"><h1>Timeless Form</h1></div></div>
"/archive"  → <div class="container"><div class="archive">
                 <img src="..."/><img src="..."/><img src="..."/><img src="..."/>
               </div></div>
"/contact"  → <div class="container"><div class="page-header"><h1>Get in touch</h1></div></div>

Styling

Fonts (Google Fonts): Barlow Condensed (body + headings, load weights up to 800) and DM Mono (links).

Palette: page background #e3e4d8 (pale sage/bone), text #141414, blocks + logo overlay #222, logo stroke/fill #e3e4d8.

• * { margin:0; padding:0; box-sizing:border-box }; body { font-family:"Barlow Condensed", sans-serif }.
• img { width:100%; height:100%; object-fit:cover }.
• h1: text-transform:uppercase; color:#141414; font-size:12rem; font-weight:800; line-height:1. At max-width:900px → font-size:2rem.
• a: text-decoration:none; text-transform:uppercase; color:#141414; font-family:"DM Mono"; font-size:0.9rem; font-weight:500.
• nav: position:fixed; width:100vw; padding:2rem; display:flex; justify-content:space-between; align-items:center; z-index:1. .nav-logo a: Barlow Condensed, 1.25rem, weight 700. .nav-links: display:flex; gap:2rem.
• .container: position:relative; width:100%; height:100%; min-height:100svh; background-color:#e3e4d8.
• .page-header: width:100vw; height:100svh; display:flex; justify-content:center; align-items:center; padding:2rem (heading dead-center).
• .archive: width:30%; margin:0 auto; padding:15rem 2rem; display:flex; flex-direction:column; gap:2rem. .archive img { aspect-ratio:5/7 } — a narrow centered column of portrait photos.
• .transition-overlay: position:fixed; top:0; left:0; width:100vw; height:100svh; display:flex; pointer-events:none; z-index:2.
• .block (created in JS): flex:1; height:100%; background:#222; transform:scaleX(0); transform-origin:left — 20 of them side by side fill the row, each a thin vertical column.
• .logo-overlay: position:fixed; top:0; left:0; width:100vw; height:100svh; z-index:10000; display:flex; justify-content:center; align-items:center; background:#222; pointer-events:none; opacity:0.
• .logo-container: width:200px; height:200px; display:flex; justify-content:center; align-items:center; padding:20px.
• .char (SplitText char wrappers): position:relative; display:inline-block; will-change:transform.

Z stack: nav 1 < transition blocks 2 < logo overlay 10000.

GSAP effect (be exact)

State

let blocks = [], isTransitioning = false, pathLength = 0, currentPath = "/", currentSplit = null, revealTimeout = null;

Init (once)

1. Create blocks: clear #transition-overlay, append 20 div.block, keep them in the blocks array.
2. gsap.set(blocks, { scaleX: 0, transformOrigin: "left" }).
3. Prime the logo path: pathLength = path.getTotalLength(); gsap.set(path, { strokeDasharray: pathLength, strokeDashoffset: pathLength, fill: "transparent" }) — the path starts fully undrawn and unfilled.
4. renderPage("/") then revealPage() (so the initial load also plays the outgoing block wipe over the home heading reveal).
5. Attach a click handler to every a[href^="/"] (nav links).

Click handler → handleRouteChange

• While isTransitioning, preventDefault() and bail.
• Let modified clicks pass through untouched (metaKey || ctrlKey || shiftKey || altKey || button !== 0 || target === "_blank").
• Otherwise preventDefault(), resolve new URL(href).pathname; if it differs from currentPath, set isTransitioning = true and run coverPage(url).

coverPage(url) — the cover timeline (the star)

Set pointer-events:auto on both overlays, then build one gsap.timeline({ onComplete: () => navigateTo(url) }):

1. Block wipe in: tl.to(blocks, { scaleX: 1, duration: 0.4, stagger: 0.02, ease: "power2.out", transformOrigin: "left" }) — each column grows from its left edge, staggering left→right across the screen (total ≈ 0.4 + 19×0.02 ≈ 0.78s) until the page is fully covered by the #222 wall.
2. Logo overlay pops on: .set(logoOverlay, { opacity: 1 }, "-=0.2") — an instant set 0.2s before the wipe finishes (no fade in).
3. Reset the draw: .set(path, { strokeDashoffset: pathLength, fill: "transparent" }, "-=0.25") — re-primed every transition so it redraws each time.
4. Stroke draw: .to(path, { strokeDashoffset: 0, duration: 2, ease: "power2.inOut" }, "-=0.5") — the silhouette draws itself over 2s, slow-fast-slow.
5. Fill fade: .to(path, { fill: "#e3e4d8", duration: 1, ease: "power2.out" }, "-=0.5") — starts 0.5s before the draw ends; the outline floods with the pale fill.
6. Logo overlay fades off: .to(logoOverlay, { opacity: 0, duration: 0.25, ease: "power2.out" }) — revealing the solid block wall still standing beneath it.

onComplete → navigateTo(url).

navigateTo(url)

currentPath = url → renderPage(url) → window.scrollTo(0, 0) → revealPage().

revealPage() — the outgoing wipe

• gsap.set(blocks, { scaleX: 1, transformOrigin: "right" }) (flip the origin).
• gsap.to(blocks, { scaleX: 0, duration: 0.4, stagger: 0.02, ease: "power2.out", transformOrigin: "right" }) — each column collapses toward its right edge, staggering across and uncovering the new page. onComplete: isTransitioning = false and pointer-events:none on both overlays.
• Safety net: clear any previous timeout, then setTimeout(…, 1000): if the first block still has gsap.getProperty(block, "scaleX") > 0, force all blocks to scaleX: 0 (duration: 0.2, ease: "power2.out", transformOrigin: "right") with the same onComplete cleanup.

renderPage(path) — fake router

1. If a previous SplitText exists → split.revert(); kill all ScrollTriggers (ScrollTrigger.getAll().forEach(st => st.kill())); destroy Lenis + cancel its rAF if running.
2. content.innerHTML = routes[path] || routes["/"].
3. If path === "/archive" → start Lenis: lenis = new Lenis() plus a requestAnimationFrame loop calling lenis.raf(time).
4. Otherwise → apply the Copy reveal to the page's h1 with delay: 0.3.

Copy reveal (SplitText heading animation)

const split = SplitText.create(element, { type: "chars", mask: "chars", charsClass: "char++" });
gsap.set(split.chars, { y: "100%" });
gsap.to(split.chars, {
  y: "0%", duration: 1, stagger: 0.03, ease: "power4.out", delay,   // delay = 0.3
  scrollTrigger: { trigger: element, start: "top 75%", once: true },
});

Each character starts translated 100% below its own overflow-hidden mask line and slides up into place with a fast-deceleration ease, 0.03s apart left→right. The ScrollTrigger (once: true) fires immediately for the centered headings (they're already in view), so it reads as a load-in reveal happening behind/under the block wipe-out. Keep the returned split instance so it can be revert()-ed on the next route change.

Assets / images

4 editorial portrait photographs, displayed at aspect-ratio 5:7 (portrait) with object-fit: cover, stacked vertically in the narrow centered archive column. Warm, intimate fashion/beauty photography works best — e.g. an extreme close-up of a freckled face half-covered by a striped towel; a sunlit swimsuit portrait against sky and sea; a wet-hair beauty close-up; a low-angle portrait in a sheer red top on a cream backdrop. No brands or text in the images.

Behavior notes

• Triggers: the transition runs on nav-link click only; the heading reveal runs per route render (immediately-firing ScrollTrigger); the initial page load plays revealPage() once (quick right-origin wipe-out) over the home heading reveal.
• Re-entrancy: isTransitioning blocks double-clicks mid-transition; overlays toggle pointer-events so the page is inert while covered.
• Total transition time ≈ 3s cover (wipe + draw + fill + fade) then ≈ 0.8s reveal.
• Lenis only on /archive (the only scrollable route) and is destroyed on every route change; other routes use native (non-)scroll. window.scrollTo(0,0) after each swap.
• Blocks are created once at init and reused for every transition (origins flipped via transformOrigin in the tweens).
• Responsive: only the h1 shrinks (12rem → 2rem at ≤900px); the archive column stays 30% width. Uses 100svh throughout so mobile browser chrome doesn't clip full-screen layers. No reduced-motion guard in the original.

Images

This component ships with 4 reference assets, served publicly. Use them as-is to reproduce the demo faithfully, then swap in your own — the layout expects the same aspect ratios.

https://motionprompts.dev/c/madeinuxstudio-page-transition/img_01.jpg
https://motionprompts.dev/c/madeinuxstudio-page-transition/img_02.jpg
https://motionprompts.dev/c/madeinuxstudio-page-transition/img_03.jpg
https://motionprompts.dev/c/madeinuxstudio-page-transition/img_04.jpg

They are hotlinkable for prototyping. For anything you ship, replace them: they are licensed for demonstration of this component, not for redistribution.

Using this outside its demo page

This component is written as a complete page — that is how the demo is meant to look. If you are dropping it into an existing project, or combining it with other components, these are the things it declares at document level and that you need to move or reconcile first.

• Palette on :root — --bone, --ink, --graphite, --mute. These names are not namespaced and they collide: --ink is defined by 164 of the 219 components in this catalogue, --paper by 94, --muted by 80, each with different values — and they will also collide with whatever your own project defines. Move them onto the component's wrapper (.my-section { --ink: … }) or rename them with a prefix.
• **Rules on *, body** — the demo owns the whole document, so these set the page background, typography and resets. Dropped into an existing project they restyle the entire page, not just this section. Re-target them at the component's wrapper before using it.
• Smooth scroll (Lenis) — this creates its own Lenis instance, and a page may only have one. If your project already runs Lenis, drop the setup shown above and reuse the existing instance, keeping the lenis.on("scroll", ScrollTrigger.update) wiring once. Two instances fight over the same scroll and stutter visibly, with no error in the console.
• Full-screen overlay — a fixed element covers the viewport (a loader or transition). Only one may exist per page and it must remove itself when done. If your page already has one, keep that and drop this; otherwise the second silently hides the first.

Adapting this to React

Everything above describes a standalone document, and this one leans on that harder than most: it is not just an animated widget dropped onto a page, it is the page — its own fake router (routes, currentPath, renderPage), the nav bar whose links it intercepts, and the two overlays that cover the swap. React withdraws the guarantees a standalone script relies on (one run, document.querySelector reaching anywhere, no teardown) at once and quietly: the component renders, the first block wipe looks right, and it misbehaves in a way that does not point back at any of this.

Under React 19 with StrictMode, every effect mounts, unmounts, and mounts again before anything reaches the screen. Here that means createBlocks() runs twice against the same #transition-overlay, and since it does not check for existing children before appending, the second pass wipes the node's innerHTML and rebuilds fresh — the leak is not doubled blocks, it's that the first blocks array now points at 20 detached nodes while a second revealPage() starts a wipe-out against them at the same time a second one starts against the live set. Worse, document.querySelectorAll('a[href^="/"]').forEach(link => link.addEventListener(...)) runs twice with no matching removal, so every nav <a> ends up with two click listeners: one click fires handleRouteChange twice, and the second call reads isTransitioning before the first call's coverPage() has had a chance to set it, so both build a gsap.timeline() against the same 20 blocks and race to call navigateTo(). None of this reproduces in a production build — only in development, only during the double-mount — which is exactly why it has to be designed out rather than tested away. Treat the cleanup as part of the effect, not an afterthought.

*(1) The entry point* — The script checks document.readyState before subscribing to DOMContentLoaded, and only once the document is ready does it call init() — the function that creates the 20 blocks, primes the logo path's strokeDasharray, renders the initial route, plays the opening revealPage() wipe-out, and wires the nav clicks. That guard exists to survive being loaded late in a plain document; useEffect already runs after the DOM is committed, so the guard and the DOMContentLoaded listener are both dead weight. Move the body of init() as-is into a useEffect with an empty dependency array — including the initial renderPage(currentPath) / revealPage() pair, which is part of mount, not part of navigation.

*(2) Element lookups* — getElementById("page-content"), getElementById("transition-overlay"), getElementById("logo-overlay"), getElementById("logo"), and the nav's querySelectorAll('a[href^="/"]') all assume this component owns the document. Give the root element — the one wrapping the <nav>, both overlays, and #page-content together, since the click interceptor has to reach the nav that sits beside the routed content, not just the content itself — a ref, and resolve every one of those lookups off it. If you split this apart later (nav living in a persistent app shell, #page-content in a routed subtree underneath), the click interception has to move up to wherever the nav actually renders; scoping it to the routed subtree alone would leave the nav's clicks unintercepted. During the StrictMode remount two copies of this subtree exist for an instant, and an unscoped document.getElementById will happily bind overlay/logoOverlay to the copy on its way out.

*(3) Cleanup* — Two things create GSAP objects here on different schedules, and only one of them is inside the synchronous window gsap.context can see. The block-priming (gsap.set on the 20 blocks) and the path's dash setup run once, synchronously, during mount — a plain gsap.context factory catches those. coverPage() and revealPage() do not: they build a fresh gsap.timeline() / gsap.to() from a nav click or from a timeline's own onComplete, both long after the factory has returned, so a context that only wraps the mount body never sees them and ctx.revert() leaves whatever wipe is in flight running. Register both as named methods with the context argument instead of calling them directly, and call them through the context from then on:

useEffect(() => {
  const ctx = gsap.context((self) => {
    createBlocks();
    gsap.set(blocks, { scaleX: 0, transformOrigin: "left" });
    primeLogoPath();
    self.add("coverPage", coverPage);
    self.add("revealPage", revealPage);
    renderPage(currentPathRef.current);
    self.revealPage();
  }, rootRef);
  document.querySelectorAll('a[href^="/"]').forEach((link) =>
    link.addEventListener("click", onAnchorClick)
  );
  return () => ctx.revert();
}, []);

and inside coverPage's onComplete, call ctx.revealPage() rather than the bare revealPage() reference — the reveal it triggers on navigation needs the same tracking the initial one gets. isTransitioning, currentPath, pathLength and the revealTimeout handle belong in refs, not state: nothing here reads them to decide what to render, and a StrictMode remount that resets a plain module variable is exactly how the double-click race above happens — a ref survives the remount because it lives on the fiber, not in the closure init() recreates.

The remaining three pieces sit outside anything gsap.context tracks. ScrollTrigger.getAll().forEach(st => st.kill()), called at the top of every renderPage() to clear the previous route's heading reveal, kills every ScrollTrigger on the page, not just this component's — harmless in the standalone demo where it's the only trigger-owning script running, but a real hazard next to any other ScrollTrigger-driven component. Keep the tween applyCopy returns instead and kill tween.scrollTrigger specifically. The revealTimeout safety net (the one-second fallback that force-finishes a stuck wipe) has to be cleared in the same effect cleanup — an unmount mid-transition otherwise leaves it armed to call gsap.to on blocks React has already unmounted. And Lenis: destroyLenis() today only runs from inside the next renderPage() call, which means unmounting while /archive is showing leaves lenis and its requestAnimationFrame loop (lenisRaf) running forever, since no further navigation ever arrives to trigger the teardown. Call destroyLenis() unconditionally in the effect's cleanup, in addition to the per-navigation call — it's a no-op when Lenis isn't active. Note this component never needs the usual lenis.on("scroll", ScrollTrigger.update) relay: Lenis only ever runs on /archive, which has no ScrollTrigger, and the char-reveal ScrollTrigger only ever runs on the routes where Lenis is torn down — the two are never live at once, so wiring them together would be dead code, not a fix.

SplitText follows the same reasoning as the block timelines: applyCopy runs from inside renderPage, itself invoked from a click handler or from coverPage's onComplete, never from the mount factory. Register renderPage with self.add alongside coverPage/revealPage so the split's masked-character tween and its once: true ScrollTrigger get grouped into the same context, and keep the existing currentSplit.revert() at the top of renderPage — that guards against splitting already-split output across route changes, which ctx.revert() at unmount does not address, since it only fires once, at the end.