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
Start building beautiful interactive graphics
Join our newsletter
Get all the latest Rive news delivered to your inbox.