Chapter 76: mix

Core Idea

Discover Motion's mix() function to smoothly interpolate between two values based on a 0-1 progress. Learn to mix numbers, colors (with linear RGB for better fidelity), complex strings, arrays, and objects. Explore how to apply easing and generate randomly distributed values.

Key Concepts

• Easing: You can apply easing to the mixed value by passing progress through an easing function:
• Random value generation: You can generate random values by using Math.random() as the progress value in mix.
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

const mixer = mix(0, 100)
mixer(0.5) // 50

• What it demonstrates: Core usage pattern for mix.

Key Takeaways

1. Numbers.
2. Colors (RGBA, HSLA).
3. Complex strings.
4. Arrays and objects of the above.

Connects To

• Easing functions: related Motion doc page.
• animate(): related Motion doc page.
• transform: related Motion doc page.
• iOS slider example & tutorial for JavaScript: related Motion doc page.