How to Animate SVG with Framer Motion — Path, Draw, and Variants

Animate SVG with Framer Motion in React — path drawing effects, shape morphing, gesture-driven animations, and scroll-triggered SVG sequences.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

Animating SVG Path Drawing with Framer Motion

Framer Motion's `pathLength` motion value drives path drawing animations. Wrap your SVG path in `<motion.path>` and animate `pathLength` from 0 to 1 to simulate the path being drawn. Combine with `initial={{ pathLength: 0 }}` and `animate={{ pathLength: 1 }}` for a simple draw-on-mount effect.

`import { motion } from 'framer-motion'`
`<motion.path initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} transition={{ duration: 2 }} d={pathData} />`
Combine with `pathOffset` and `pathSpacing` for dashed draw effects

SVG Variants and Orchestration in Framer Motion

Framer Motion variants define named animation states and can orchestrate SVG child elements. A parent `<motion.svg>` with variants propagates state to child `<motion.path>` elements. Use `staggerChildren` in the parent transition to create sequential path draw effects where each path animates in turn.

Parent SVG: `variants={{ visible: { transition: { staggerChildren: 0.1 } } }}`
Child paths: `variants={{ hidden: { pathLength: 0 }, visible: { pathLength: 1 } }}`
Result: paths draw sequentially with 0.1s stagger between each

Frequently Asked Questions

How do I trigger an SVG draw animation when it scrolls into view with Framer Motion?

Use Framer Motion's `useInView` hook: `const ref = useRef(null); const isInView = useInView(ref, { once: true })`. Then: `<motion.svg ref={ref} animate={isInView ? 'visible' : 'hidden'}>`. The animation triggers once when the SVG enters the viewport.

Can I animate SVG fill color transitions with Framer Motion?

Yes — `<motion.path animate={{ fill: '#FF0000' }} transition={{ duration: 0.5 }} />` animates the fill color. Framer Motion interpolates between color values including hex, rgb, and hsl strings. Chain multiple color values in an array for keyframed color sequences.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG