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.