Documentation

Documentation

JavaScript

svgEffect

svgEffect

Checking Motion+ status…

Unlocks for everyone in

00:00:00:00

Or

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

00:00:00:00

Or

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

00:00:00:00

Or

One-time payment, no subscription

Already joined?

svgEffect applies the output of motion values to styles and attributes of one or more elements.

When these motion values update, the element will re-render once per frame during the render step of the frameloop.

const cx = motionValue(100)

svgEffect("circle", { cx })

In addition to regular styles, svgEffect also supports simple 0-1 progress values for drawing-style animations.

These values can be used with any SVG element that supports stroke, for instance <rect>, <path> etc.

By default, svgEffect applies valid styles via .style. In cases where there's also a valid attribute equivalent with the same name, these can be set with the attr prefix:

const width = motionValue(400)

svgEffect("rect", { attrWidth: width })

Level up your animations with Motion+

Access to 100+ premium examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.