I lately recreated the Mac Mini animation utilizing Rive, a no-code animation instrument that’s turning into more and more in style amongst internet and product designers (and builders).
To make this simpler to observe, seize my remix hyperlink and observe alongside. Right here’s the animation we’ll be recreating:
Rive Consumer Interface
Welcome to the Rive interface. Right here’s a fast rundown:
- Toolbar
- Hierarchy (or Layers) Record
- Artboards
- Toggle to modify between Design or Animate Mode*
- Animations shelf — solely proven whenever you’re in Animate Mode*
*When designing or laying issues out, keep in Design mode. Once you’re able to animate, swap to Animate mode (shortcut: tab key).
Nested Artboards
Since this can be a advanced animation, I’ll be utilizing nested artboards. It’s just like elements in Figma — you’re employed inside a separate artboard after which carry it into the primary timeline.
Two huge benefits of doing this:
- Retains your fundamental timeline clear (consider me, it will get messy).
- Permits you to reuse animations, which we’ll see quickly.
Create Animation Timelines → Configure the “i”
The letter “i” has 4 phases. For every stage, I’ve tweaked the properties on the primary body — we’ll see them animated as soon as we wire them up within the State Machine.
The one exception is Stage 3, the place the dot on the “i” bounces a bit.
Utilizing State Machines & Inputs → Animate the “i”
Now, right here’s a secret: the state machine is what makes Rive so highly effective.
A state machine binds a number of animations and defines the logic for transitioning between them. In my instance:
- An Any State block connects to the opposite animations, permitting me to leap between phases at any level, not simply in sequence.
- An Enter takes in a stage variable (from 0-3).
- Circumstances map the stage variable to its corresponding animation.
As soon as the variable stage is created, we will hook up a situation to those connector arrows. Within the screenshot above, for instance, if stage == 0, the animation “Stage 0” will run.
Earlier than returning to the primary artboard, make sure the stage variable is “uncovered to the guardian artboard,” permitting you to switch stage in the primary timeline.
Fake 3D → Cash, Hearts, and Star
One nice function of Rive is the flexibility to create fake 3D results. That is pretty easy: add a thick stroke and guarantee “Apply rework” is turned off.
Then, tweak the X scale from 100% to 0% (then to -100%), and it’ll seem to spin in 3D!
We apply this similar idea to the coin and the star — when added to the primary timeline, it creates a magical impact ✨
Placing It All Collectively
With all of the smaller animations prepared, we will add them to the Principal artboard.
Assume strategically about the way you wish to group layers (components that animate collectively ought to be grouped).
Moreover, solo mode permits you to simply present one layer and conceal the others:
I do know this can be a deep dive, particularly if that is your first time utilizing Rive. One of the simplest ways to study is to seize the remix file, break it aside, and discover it your self!
Bonus: for the pirate flag, it’s just like what’s described in this tutorial (beginning on the 8:30 mark).
