Chapter 74: mapValue

Core Idea

Learn to use Motion's mapValue to create a new read-only motion value by mapping a numerical motion value's output to a range of numbers, colors, or complex strings. Understand how to define input/output ranges and control clamping behavior.

Key Concepts

• Unclamped ranges: By default
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

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"])

• What it demonstrates: Core usage pattern for mapValue.

Key Takeaways

1. Both ranges must always be the same length.
2. The input range must always be a linear series of numbers, either counting up or count.
3. The output range can be a non-linear series of numbers, colors, or complex strings.

Connects To

• motionValue: related Motion doc page.
• transformValue: related Motion doc page.
• springValue: related Motion doc page.
• Image reveal slider example & tutorial for JavaScript: related Motion doc page.