Chapter 89: transform

Core Idea

Discover Motion's transform function to map an input value from one range to another. Learn how to use it with linear input ranges and various output types like numbers, colors, or complex strings.

Key Concepts

• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

const numberToColor = transform(
  [0, 100], // Input
  ["#000", "#fff"] // Output
)

numberToColor(50) // rgba(128, 128, 128, 1)

• What it demonstrates: Core usage pattern for transform.

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

• useTransform: related Motion doc page.
• Motion Values: related Motion doc page.
• mix: related Motion doc page.
• transformValue: related Motion doc page.
• animate(): related Motion doc page.