Rive Playground
Rive is a 2D animation tool that enables designers to easily add high-quality animation to their apps and games. Rive animations can be manipulated at runtime and can be layered such that multiple independently-designed animations run at the same time.
Here are some of my favorite interactive Rive projects that I have created. Feel free to interact with these projects!
Dynamic Boxes
This is my latest Rive project. I spent a lot of time experimenting with character animation states prior to working on this project, so I thought it would be fun to create something a little more UI focused.
These interactive boxes have a hover state and a toggle for a pointer down action. Some of the expanded elements are interactable as well.
Try expanding some of these boxes and see what they reveal! The checklist is interactive. The pause/play button can be toggled. The Wi-Fi box’s expanded state includes a switch for turning Wi-Fi on and off.
RPG Character Selection
This project features both character states and satisfying UI animations. The Idle state is a generic character with an idle animation.
The “select class” button has a hover state. Clicking on the button reveals four new characters you can cycle through. The idle animation from the initial default character continues to loop. The clothes and weapons on the character change as you hover through the other classes.
Steam Mobile App UI Animation
Discord added interactive UI animations to their app, so I thought it would be fun to do the same with Steam’s mobile app. Since this is a mobile mockup, there are no hover states. Just click on the icons and watch the icons animate and change to an active color state!
Cursor Tracking Character
This idea came from the button for “About Me” on my homepage. I thought it would be fun to have a character that interacts with the cursor.
The face and eyes follow the cursor. You can click on the character, and their face will change to an annoyed state. The character’s face will return to it’s default expression once the cursor exits the face.
Groovy Dude
This was my first project using the IK rig feature in Rive. This was also my first project to use an animation state toggle.
The groovy dude is stuck in an idle state until you click on the play button. The button toggles the character from their idle state to their dancing state. The blend from idle to dancing is surprisingly smooth!
Interactive Tamagotchi
This was my first big Rive project. I watched the entire Rive 101 tutorial series and followed through each video. It was a great learning experience to replicate what the tutorials taught, but I wanted to challenge myself and create something without following a step-by-step guide.
The Tamagotchi body follows the cursor, and each button has its own animation state. Try clicking on the buttons to see each micro animation!
Bonus Content!
Here are some other animations I worked on. I haven’t been using Rive for long, but it’s been so much fun. Feel free to come back and see what else I’ve been working on!
