SVG Reveal on scroll
A component that animates SVG paths based on page scrolling, creating a drawing effect that progresses as users scroll down the page.
Make it with Workshop
Build your own component with AI
This component is part of Framercrafts, a library of supercharged Framer components and overrides.
Description
Path Reveal creates a scroll-driven animation that draws an SVG path as the user scrolls down the page. The component takes an SVG file, extracts the path data, and animates it with a drawing effect synchronized to the scroll position. When the user reaches the bottom of the page, the animation completes with a spring effect.
Use Cases
1. Storytelling - Animate paths to illustrate a narrative as users scroll
2. Process Visualization - Show step-by-step flows that reveal with scrolling
3. Route Maps - Animate travel routes or directions as content is scrolled
4. Timeline Effects - Create animated timelines that draw as users progress
5. Decorative Elements - Add engaging scroll-based path animations to websites
Customizations
• SVG Path - Upload any SVG file to be animated
• Beam Appearance - Adjust color, width, and opacity
• Animation Control - Set starting and ending opacity values
• Scroll Speed - Control how quickly the path reveals while scrolling
• Responsive Design - Adapts to container dimensions
