Create rich interactions with animation mixing

Rive's state machines let you create rich layered interactions thanks to animation mixing. It's a core concept in Rive and not found in many design tools.

In this example, we have a walking character that changes outfits with every click.

This file has a few state machine layers driving simultaneous animations.

1. Walk cycle layer

First, there's a layer that's playing a walk cycle.

2. Bounce layer

Then there's a layer that plays a bounce animation on each click. The timeline is just a few scale keys.

3. Skin layer

Finally, there's the skin layer, which is a sequence of 5 states. Each click transitions to the next. The timelines for each state are just one frame, turning on and off the visibility of various layers.

On their own, these are all basic animations. Mixing them together is what makes it feel magical. ✨

Dive deeper into the concepts we covered

• 🎨 Remix this file

• 🤖 State Machine tutorial

• 📄 Design vs Animate blog post