FireFox is blocking Twitter content

To view content on tw-rl, follow these steps...

  1. Click on the shield in the address bar.
  2. Toggle the switch at the top of the panel.
Sign In →
Sign In →
start
Read Thread
Animating the wizard was a ton of fun! πŸ§™πŸΌβ€β™‚οΈ It was quite a challenge, too... Here's a mini-breakdown / tutorial of how I did it with @rive_app . Grab some β˜• and let's do it! πŸ‘‡
Abe @abeyangSprinkled in some motion magic for an already magical site. ✨ @diagram ⨉ @framer ⨉ @rive_app twitter.com
Here are the high-level stepsβ€” 1️⃣ Break apart @FonsMans' illustration ➑ @rive_app. 2️⃣ Add constraint to track cursor 3️⃣ Apply mesh and bones to body (something I've been wanting to learn) 4️⃣ Apply rest of animations 5️⃣ Make sure it all feels good! Let's go! πŸ‘‡
1️⃣ I took @FonsMans illustration, broke it into layers, and fed into @rive_app First, I used @snap_edit to *easily* get it 75% there (wizard + table + monitor). The rest was all Photoshop β€” brushes of all kinds. I then imported the PSD directly into @rive_app
2️⃣ β€” Constraints are a bit tricky to get working. 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. Simple, right? πŸ˜…
3️⃣ β€” *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 by @BobbehHaynie was super helpful! (Meshes should try to match 3D form!) https://www.youtube.com/watch?v=lcO_oiFoOiM
4️⃣ β€” Apply the rest of the animations. Fun! πŸƒπŸ»β€β™‚οΈ
0:000:00
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.*
5️⃣ (cont'd)β€”my main timeline is 3 seconds long (looped). But it started feeling mechanical... Biggest bang for buck β€” move wizard head to a 7s timeline. Simple fix β€” breaks monotony! Beauty of @rive_app (unlike AE): timelines loop independently from one another πŸ™Œ
Lastly, it would've been fun animating the light streaks using @framer overrides... but alas, I ran out of time. Pro-tip: always good to time-box side projects. Otherwise, there's really no end to the rabbit hole.
Thank you all for the ❀️! Special thanks to @jsngr and @FonsMans for kindly letting me have fun with their work. πŸ˜… I have a few more articles on Rive on Medium. Here's one on how to utilize nested artboard/animations. https://medium.com/all-by-design/rive-how-to-use-multiple-animations-within-nested-artboards-a46c7741f7c7 Let me know if you have any Q's!

My Notes:

Select to add to your #gallery:
Abe

Pro Curator

$99 /yearPay what you can