Chapter 88: svgEffect

Core Idea

Learn how to use Motion's svgEffect to apply motion values to SVG element styles and attributes. Discover how to create 'draw' animations with pathLength, pathSpacing, and pathOffset, and understand its automatic CSS-style transform origin handling.

Key Concepts

• Draw animations: svgEffect makes it simple to make "draw"-style animations using the following special valu
• Infinite looping: By leaving pathSpacing unset
• CSS-style transform origin: By default
• Cancel: svgEffect returns a cleanup function which
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

const cx = motionValue(100)

svgEffect("circle", { cx })

• What it demonstrates: Core usage pattern for svgEffect.

Key Takeaways

1. svgEffect supports Draw animations.
2. svgEffect supports Infinite looping.
3. svgEffect supports CSS-style transform origin.

Connects To

• motionValue: related Motion doc page.
• SVG animation: SMIL vs CSS vs JavaScript compared: related Motion doc page.
• frame: related Motion doc page.
• styleEffect: related Motion doc page.
• attrEffect: related Motion doc page.