Rive Blog

Create rich interactions with animation mixing

Animation mixing in Rive lets you create rich layered interactions that look complex but are actually pretty simple under the hood.


Wednesday, September 21, 2022

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

Join our newsletter

Get all the latest Rive news delivered to your inbox.