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 })

styleEffect is in alpha. This means it's currently lacking some key features that are planned for the future:

• Independent transform support

• Default unit types

• CSS properties