mapValue

JS

React

Vue

Get started

Examples

Animation

Gestures

Reactive

Utils

Integrations

Guides

JS

React

Vue

Get started

Examples

Animation

Gestures

Reactive

Utils

Integrations

Guides

JavaScript

mapValue

Motion+ Exclusive

Checking Motion+ status…

Unlocks for everyone in

49 Days 09 Hours 48 Minutes

Get Motion+ for instant access

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

49 Days 09 Hours 48 Minutes

Get Motion+ for instant access

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

49 Days 09 Hours 48 Minutes

Get Motion+ for instant access

One-time payment, no subscription

Already joined?

mapValue creates a new read-only motion value that maps the output of a numerical motion value to a range of numbers, colors or complex strings.

const x = motionValue(100)

// Fade out outside the 0-100 range
const opacity = mapValue(x, [-100, 0, 100, 200], [0, 1, 1, 0])

// Shift color when fading out
const backgroundColor = mapValue(opacity, [0, 1], ["#f00", "#00f"])

mapValue

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.

Get Motion+

motionValue

transformValue

JS

React

Get started

Examples

Animation

Gestures

Reactive

Utils

Integrations

Guides

JS

React

Get started

Examples

Animation

Gestures

Reactive

Utils

Integrations

Guides

Go beyond the basics

Stay in the loop

©2025 Motion Division Ltd.

Site

Social

Stay in the loop

©2025 Motion Division Ltd.

Site

Social