Chapter 13: interpolateColors()

Core Idea

Allows you to map a range of values to colors using a concise syntax.

Key Concepts

• API
• easing<AvailableFrom v="4.0.475" />
• Returns
• Example
• posterize<AvailableFrom v="4.0.470" />
• Interpolating rgb or rgba colors
• Interpolating hsl or hsla colors
• Interpolating color names

Code Examples

const frame = useCurrentFrame();
const color = interpolateColors(frame, [0, 60], ['black', 'white'], {
  easing: Easing.in(Easing.quad),
});

• What it demonstrates: Usage pattern for interpolateColors() from the official docs.

Key Takeaways

1. Understand api when working with interpolateColors().
2. Understand easing<availablefrom v="4.0.475" /> when working with interpolateColors().
3. Understand returns when working with interpolateColors().
4. Understand example when working with interpolateColors().
5. Understand posterize<availablefrom v="4.0.470" /> when working with interpolateColors().

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Animation Math: related page in the Fundamentals & Core Concepts section.