SVG Animate

SVG Animate for Framer

A highly-optimized component that brings your vector graphics to life with smooth, cinematic drawing effects.

Features:

• Zero-Code Input: Choose your workflow. Upload an .svg file directly from your computer, or paste your raw SVG code.

• Smart Fill Modes: Automatically match your SVG's fill color to the drawing stroke, set a custom fill, or preserve the original artwork's colors.

• Precision Timing: Complete control over Duration, Delay, and Stagger to create sequential drawing effects.

• Easing: Includes 7 easing curves (from Linear to Power 4 to playful Bounce and Elastic outs) so you can match the animation to your brand's specific feel.

• Flawless Scaling: Built-in "ViewBox Rescue" ensures your SVGs scale perfectly within any Framer layout block.

How It Works:

Drop it in and add your SVG. A built-in parser instantly sanitizes messy code, while the GSAP DrawSVG plugin handles the complex math to deliver beautiful stroke animations.