SVG Reveal on scroll

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