styleEffect

styleEffect applies the output of motion values to the .style attribute 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 blur = motionValue(2)
const filter = transformValue(() => `blur(${blur.get()}px)`)

styleEffect("img", { filter })

In addition to regular styles, styleEffect supports:

• Independent transforms (x, scaleY etc)

• Default unit types (i.e use numbers like 100 instead of "100px")

• CSS properties