SVG Animate: Premium Interactions Component by Abhrajit Ray

Marketplace Components Categories Interactions

Bring your SVGs to life with zero code. Just upload an SVG file or paste the raw SVG to create smooth drawing animations. Fully customizable easing, stagger, and colors for your icons and complex illustrations.

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.