Documentation

Documentation

JavaScript

transformValue

transformValue

Checking Motion+ status…

Unlocks for everyone in

36 Days 09 Hours 48 Minutes

Or

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

36 Days 09 Hours 48 Minutes

Or

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

36 Days 09 Hours 48 Minutes

Or

One-time payment, no subscription

Already joined?

transformValue creates a new read-only motion value computed from the output of one or more motion values.

const blur = motionValue(0)
const filter = transformValue(() => `blur(${blur.get()}px)`)

styleEffect("img", { filter })

This is useful for combining multiple motion values into a single value, or performing calculations on a motion value's output.

const scale = motionValue(1)
const inverseScale = transformValue(() => 1 / scale.get())

styleEffect(".parent", { scale })
styleEffect(".child", { scale: inverseScale })

transformValue

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.