Documentation

Documentation

JavaScript

styleEffect

styleEffect

Checking Motion+ status…

Unlocks for everyone in

45 Days 15 Hours 13 Minutes

Or

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

45 Days 15 Hours 13 Minutes

Or

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

45 Days 15 Hours 13 Minutes

Or

One-time payment, no subscription

Already joined?

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

styleEffect

Examples

Go beyond the basics

Motion+ is a one-time fee, lifetime membership.

As well as premium Motion features, early access content, and a private Discord community, you'll unlock access to the source code of 90+ premium examples that take the APIs on this page to the next level.

Loading...
Loading...
Loading...
Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.