SVG Draw Transition is a premium animated page transition for Framer. It draws a custom SVG path across the screen, expands the stroke to cover the page, then smoothly erases on the next page — creating a cinematic navigation effect.
Unlike basic fade or slide transitions, this uses real SVG path animation for a more dynamic, high-end experience.
Intercepts internal <a> links
Draws the SVG path on exit
Thickens the stroke to cover content
Navigates instantly
Erases the path on page load
No Barba.js.No external routing setup.GSAP loads automatically when needed.
DrawSVGTransition — Setup Guide
Click the Copy Component button.Then paste directly onto your Framer canvas.
Framer will automatically import the component and add it to your Assets panel.
In the Layers panel, drag the component to the very top so it sits above all other layers.
Then set its position to Absolute in the properties panel.
This ensures the transition overlay renders on top of everything.
Place this component on every page in your project.
Keep all property values identical across pages — same stroke color, same durations, same easing — for seamless transitions between pages.
Go to Page Settings → Transitions and set the transition to None (Instant).
The component handles all transition visuals itself.
The animation only triggers on elements that use the <a> HTML tag.
In Framer:
Select your link or button layer
Open the Accessibility section in the right panel
Set Tag to a
Without this, clicks will not trigger the transition.
Paste any SVG d path
Stroke color control
Leave duration
Enter duration
Stroke Max control
Reduced motion support
Design your own path in Figma or Illustrator and paste it directly.
If the stroke doesn't fully cover your page content, increase the Stroke Max value.
Use Leave Duration and Enter Duration independently to tune how fast the path draws in vs. erases out.
The SVG Path field accepts any d attribute from an SVG <path> element — design your own path in Figma or Illustrator and paste it in.
Ignores same-page links
Skips mailto, tel & anchor links
Prevents double-click glitches
Includes fallback safety timer
Canvas stays clean while designing
Perfect for portfolios, agency sites, creative studios, and premium landing pages.
If you want your Framer site to feel cinematic and custom between pages — this SVG Draw Transition delivers.
Daniyal Habib
