Page transition

SVG Stroke Page Transition

by Vanguardia · motionprompts.dev

Page transition where two full-screen squiggly SVG paths draw themselves in via animated strokeDashoffset while their stroke-width swells from 200 to 700, wiping the viewport, then keep drawing out as the stroke thins back to reveal the new page. Triggered by clicking the navbar links routing between three hero pages.

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

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

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

click-triggered SVG stroke draw wipe overlay: two full-screen squiggle paths run strokeDashoffset length->0 while attr stroke-width fattens 200->700 (leave), then offset->-length while stroke-width thins back to 200 (enter); both 1s power1.inOut, simultaneous, no scroll and no inertia

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,651 charsCustomize

# SVG Stroke Page Transition — Two Self-Drawing Squiggle Strokes That Swell to Wipe the Screen

## Goal
Build a tiny multi-page site (three full-screen hero "pa…

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.