Animating Characters in Rive

In this project, I’m working on interaction design skills and learning functions like Creating Bones & Character Manipulation in the Rive App.

Situation

I’ve dabbled with Rive App for several months and have used it for prototype and product work for my job. It is a powerful animation tool that creates animations optimized for web. I want to add a few more 'hook' elements to engage people visiting my site and feature animation skills.

Task

As my starting spot, I looked at the Bones guide instructions with the intention of creating a simple character that waves to the viewer whey they hit the landing page. In the past, I used Adobe Character Animator for character rigging and have an old character I drew years ago that will serve as my character.

Action

In my first attempt, I used a combination of SVG and PNG elements, but I couldn’t figure out how to connect the bones to the PNG mesh on the arms. I pivoted and recreated the entire character in SVG, which improved the character.

Then, I brought this character into Rive to attempt the rigging and animation. I found another tutorial that was much more helpful for where I was at, Rigging and Animating.

After bringing the character into Rive, I started by creating the center root bone along the chest. I created bones along the left arm, which was going to do the waving. To keep the character planted to the ground, I added another bone on the base. Then, I renamed all the bone layers so I could tell where exactly the elements were bound to.

The next step, was to set up the parent-child relationships for the bones. Taking a look at the left-side panel, I am nesting bones that I want connected under each other so when one rotates, others will too. This takes a bit of trial and error on my part to figure out what needs to go below the other and how they arrange themselves.

Binding and weighting is the next step, where I needed to select the path of the arm shape and bind to the 3 left arm bones. Then, I need to go into the “edit vertices mode” where I can select the vertex and handles and set different weights.

I started at the hand and worked up the arm, giving different influences over the handles. This allows me to rotate and change positions of the arm.

Before I switch over to the Animate panel, I make sure to set my character in its starting position in the the design mode. Anything done after this, will be done in the Animate panel, but it is essential to start the design in the original position.

I am ready to animate my character!

The first step in the timeline, is to select the bones in the arms and use the rotation panel to set it to its maximum upward rotation. This will create the first keyframes and I repeat in the opposite direction at 30 frames and then finally at 1:00 I bring it back up.

I set it to loop to repeat the animation and on the right hand side, set the keyframes to cubic for a smoother wave. In the end, I established 7 areas to move along the timeline to create a satisfying wave.

Result

I’m satisfied with where I ended up and you can see the animated character on the bottom of the about page. Originally, I wanted an animated element on my home landing page, on the hero, but it just didn't feel right.

Rive is consistently challenging at the same time it is powerful. I can’t get enough of how smooth the animations play and how easy they are to implement on a Framer site. I am grateful for my experience with After Effects and Adobe Character Animate because without them, the learning curve would be much steeper.