SVG Reveal on scroll

This component is part of Framercrafts, a library of supercharged Framer components and overrides.

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