Rive: How to use multiple animations within nested artboards
I’ve touched upon Rive and its benefits in another article. This also assumes reader has some working knowledge of state machines.
Among the many cool things about Rive (constraints! listeners! mesh deformation!) is the ability to have nested artboards, and the ability to have animations within each artboard.
Nested Artboards
In short, nested artboards is equivalent to Figma’s components. It allows users to create an instance, have multiple animations associated with it, and other artboards can refer to it. The beauty of this is you only need to make modifications in one place, and the changes will bubble up to all the other places where you’ve referenced it.
The Setup
The question at hand is: how do you harness the power of the nested artboard when it comes to animation? Here’s the final asset, in case you wanna check it out—
https://rive.app/s/7Us4Fmsbb0O5IkMITlZIQQ/
For this animation, I’ve set the toggle and the popover to have its own individual artboard, along with its own set of animations.
The Problem
The problem comes when I try to link the animations together, and trying to hook everything within the state machine. The following was my first attempt:
In the above, with the toggle selected [1], you can see that I’ve added three simple animations [2]. Depending on the specific animation, I’ve toggled the certain animations on and off [3].
This should work, yes?
No.
Unfortunately, it does not.
To be frank, I’m still not 100% certain why it doesn’t work. From what I’ve gathered, when you stack animations on like this, it mixes all the animations together¹. Moreover, once an animation is played, it doesn’t ever start back at the beginning… unless it is specifically called to do that.
The Solution
Rather than using a simple animation, the solution is to use a remap animation—
From there, you can keyframe the beginning and end of those specific animations. Bonus of all this? You can easily play things backwards… so for me, I only had to do one set of animations, then reverse it with the remap function. 🙌
Conclusion
Rive is currently in Beta, so they’re working out the kinks. However, if you’re able to bear through with this, it can be a really powerful tool.
I’m just barely scratching the surface.
[1] Even if only one animation is playing — and the other ones are off—something about it mixing together throws some really funky errors. In short, this is not the solution. 😬
