November 2025 | laboratory
Learning and creating interactive animations that utilize various animation states and logic, ready for implementation.
This laboratory post explores my foray into interaction design, particularly a new emerging tool that seems to be gaining popularity: Rive. My experience primarily focused on learning Rive-specific workflows and features, such as the State Machine.
I wanted to expand my skill set beyond video-based motion graphics and into motion that is ready for practical, real-world applications. Rive enables me to bring together my more niche technical skills with my broader motion graphics background into a single tool that is evolving rapidly. In this laboratory post, you’ll see me build upon my State Machine knowledge, while also leveraging extensive After Effects experience to create interactive animations, and ultimately, complete and implement a new hero animation for my website.
Timeline: 3 Weeks (November 2025)
(breakdown pictured below)
Tools
Roles
Figma
Rive
Rigging
Animation
Interaction Design
UI/UX Design
01 - interactive button
The first thing I made in Rive was an Interactive Button.
Designed in Rive and animated in Rive, this was my first introduction to the “State Machine.”
I made this with guidance from a tutorial made by Jake Bartlett.
To create this button, I used the State Machine to drive interactivity.
To use the State Machine I had to create multiple “States.” Rive allows users to create various animations of the same artboard, and to create an interactive animation, you weave together different animations based on various interactive inputs.
In this case, when the user hovers over the button, it scales up, and when the user clicks the button, it clamps down. Rive also allows for elastic easing, which is what you see when interacting with the button.
02 - INTERACTIVE BEAKER
Once I learned the basics of the State Machine and Rive, I wanted to challenge myself by animating my laboratory beaker icon.
I used “hitboxes” to control the tilt direction of the Beaker when hovered over.
I also added a click interaction on top of the looping animation.
Using layers of the state machine to seamlessly transition between animations, I created this interactive beaker animation.
I was happy with how easy this was to set up, and how intuitive the process felt. So, I thought I was ready to try more complex interactive animations.
03 - cursor tracking & animation
And so, I started to animate a character originally designed by my peer and classmate, Natalie Elliott.
Natalie did a great job designing this character for our 24-hour contest animation. So, with Natalie’s permission, I redesigned parts of this character’s outfit and made some Rive animations with him.
You can find Natalie’s work here:
https://www.instagram.com/p/DUygjPKkeVU/
Meet my mascot and lab assistant, Harvey.
Setting this animation up was so interesting, and made me really love working in Rive. Cursor tracking was a simple process to set up using constraints, and it is such a cool way to add interactivity.
This exploration of Rive and interactive animation ultimately culminated in the animation you can find on my homepage.