SVG Reveal
A Framer component that reveals an SVG one shape at a time, with entrance presets, directional staggering and viewport triggers.
About SVG Reveal
SVG Reveal gives individual vector shapes their own entrance rather than moving an illustration as one flat object. Its sequencing can follow the artwork’s document order or progress across it in either direction.
A global color override changes the illustration without editing its source. Viewport triggers and optional repetition allow the same artwork to support a single entrance or a longer scroll-led sequence.
Component details
Animates individual shapes inside an SVG illustration.
Viewport or section triggers start the sequence, with optional repetition and spring transitions.
Entrance modes include four slide directions, Fade, Scale and a custom state.
Stagger timing and direction, global color override and native Framer spring settings are adjustable.
The animation engine is designed to scale responsively.
Paste SVG code into the SVG Code field in Framer, choose the entrance and staggering, then preview before publishing.
Related components
View all
Built something worth finding?
Submit a site, template, component or tool built with any stack. We will add it to the atlas.