That's a demo of a dynamic island animation I made using Rive. You can tap on different screen parts, and a cat will try to catch you with its paw. It was a lot of fun to do and an exciting challenge to see how to set up the state machine for this.
Try it to move your cursor near the dynamic island and have a little fun.
I thought it could be funny that the cat is inside the phone and that whenever you bring your finger closer, the cat tries to catch you.
The cat's paw, the eyes and the shape of the dynamic island are designed in Rive.
I created a rig using bones and controls.
The eyes also have some controls to move the eyelids or pupils.
I planned how the hand would move to see what animations I needed. I used three movements. One in the center, one on the right, and one on the left. And the idea is to mix these animations using the state machine.
I animated these movements and created more animations I needed for the interaction, like an idle for the beginning or the eyes animation.
Then in the state machine, I create the interaction based on the three areas that the user can interact. For these areas, I used listeners that detect when the user interacts and fire the different inputs to play the animations.
In the state machine, I have added the listeners, inputs, and transitions between the different states. Here you can see how the interaction works.
