Animating the wizard from magician.design with Rive
Last week, I was able to recreate magician.design and sprinkled in some motion magic to it ✨. Here’s a quick tutorial of how I did it.
High Level
1️⃣ Break apart the illustration and import into Rive.
2️⃣ Add constraint to track cursor
3️⃣ Apply mesh and bones to body
4️⃣ Apply rest of animations
5️⃣ Make sure it all feels good!
Step 1 —Break apart the illustration and import into Rive.
I grabbed the final asset from the website, then used SnapEdit to easily get it 75% there (wizard + table + monitor).
The rest was all Photoshop, using brushes of all kinds.
I then imported the PSD directly into Rive.
Step 2 — Add constraint to track cursor
Main ideas: need ❶ “Target” to specify cursor and ❷ “Hit Area” to define boundaries for cursor.
Then, attach the Hit Area as a Listener, set to “pointer move” and attach Target.
(You get the hang of this after a while.)
Step 3 — Apply mesh and bones to body
Meshes make 2D objects feel more 3D. So I wanted to apply that to Wizard’s body.
Bones gives you better control over the meshes (particularly the vertices).
This tutorial was super helpful! (TLDR: Meshes should try to match 3D form!)
Step 4 — Apply rest of animations
Step 5 — Make sure it all feels good!
This sounds simple, but practically difficult to do.
Too many animations at once = overwhelming.
Most of my revisions focused on toning things down.
For example, my main timeline is 3 seconds long (looped). But it started feeling mechanical. So, the biggest bang for buck is to move the wizard head to a 7-second timeline.
It’s a simple fix — and it breaks the monotony!
The beauty of Rive (unlike AE) is that timelines loop independently from one another 🙌
You can check out the final product here!
