Interactive Frog Made With Rive

Unlike my usual workflow, I skipped the sketching phase and dove straight into Rive with one goal: to create cute frog and learn how to use the state machine.

Without a set plan for the scene, I built him from scratch, using tutorials to troubleshoot along the way. This project quickly became a favorite as I explored and learned Rive. Everything was crafted in Rive, except for the textures, which I created in Photoshop.

Here is the process of my workflow in Rive.

Process

I built this frog using bones to structure and control its animations, giving it smooth and dynamic movements. To make the interaction more engaging, I used 'hitboxes' as triggers, allowing the frog to perform different animations based on where the cursor hovers. Additionally, I implemented another trigger that enables an object to follow the cursor, adding an extra layer of interactivity to the project.

Animation Steps


State Machine


The main animation system in Rive for creating interactivity is the state machine.
It operates on a true/false system, which allowed me to link hitboxes to trigger specific animations and seamlessly return them to their original state.

jacarme.motion@gmail.com - MOTION DESIGNER