Welcome to the Rive Masterclass for Designers — a hands-on journey into interactive motion. You’ll build one evolving project while mastering animation, state machines, and Rive’s newest features like Data Binding and Responsive Layouts.

Get familiar with the Rive interface and create your first artboard for the splash screen.

Learn how to use the Assets panel and import a reference image to guide your character design.

Build a simple animated character using basic shapes and gradients.

Organize your character into groups and layers to prepare for animation.

Create the character’s first blinking animation and bring it to life with subtle motion.

Animate your app logo and character together to create a polished intro screen.

Learn how to use easing and the interpolation panel to make your animations feel more natural - using acceleration, deceleration, and smooth rhythm.

Create a simple State Machine and connect it to your blinking animation to make it run automatically.

Run blinking idle and entry animations at the same time using State Machine layers — and learn how to control parallel behaviors.

Learn how to create smooth transitions between different animation states using logic and triggers in the State Machine.

Use a Trigger input to control when an animation starts — and learn how to manually control flow without relying on exit time.

Use a simple true/false switch to show or hide a dark overlay and toggle between day and night modes.

Create four weather backgrounds (Clear, Heat, Rain, Snow) and display them one at a time using Solo Groups.

Control which background is visible using a Number input and logic-based transitions between states.

Bring your avatar to life with a jumping entrance and a final animated transition into the main screen.

In this lesson, we’ll learn how to export and share your Rive project — from runtime files (.riv) and editable files (.rev), to shareable links, rendered GIFs, and videos.

In this lesson, we’ll start designing the main forecast screen for the WeatherBuddy app. We’ll add location, temperature, and weather text using text layers — and learn how to style parts of the same line with Text Runs and Text Styles.

In this lesson, we’ll design four forecast buttons—one for each weather type—and organize their visual structure using groups and Nested Artboards. You’ll learn how to prepare interactive components and lay the foundation for user input in the next step.

In this lesson, we’ll connect each forecast button to the app logic using Listeners and Click events. You’ll learn how to use the Input Change action to update a Number Input, making the animation respond to user interaction for the first time.

In this lesson, we’ll make our app design fully dynamic by updating the UI elements according to the selected weather mode. We’ll learn how to change the temperature, range, and weather title using keyframes — highlight the selected forecast button — and add a subtle bounce animation for click feedback.

In this lesson we explore Constraints in Ryve, a powerful way to create dynamic connections between layers. You’ll learn four key types — Scale, Rotation, Translation, and Transform — through clear, hands-on examples. Finally, we’ll apply them to fix the issue where 2 layers overlapping each other.

In this lesson, we create an Avatar Master component that manages all of our character designs. We add four different avatars, one for each weather type, and connect the logic so the avatar updates automatically when switching between states.

In this lesson, we’ll learn how to communicate between a parent artboard and a nested component using inputs. We’ll then connect the main screen to the Avatar Master so the character automatically updates with the weather.

In this lesson, we create a dedicated eye component for the Clear Skies avatar by adding eyelids to create natural blinking animation. We'll then integrate it back into the main screen to gives our character more life and personality.

We add interactive eye tracking so the avatar’s pupils follow the mouse or finger, using a Mouse Detector, Listener, and the Translation and Distance Constraints.

In this lesson, we duplicate the Clear Skies eye logic and adapt it for the Heatwave avatar, complete with new colors and eyelashes. We’ll create the blink using a mask instead of eyelids, use basic rigging to make the eyelashes follow the eyes, and integrate the new eyes into the main avatar.

In this lesson, we’ll finish setting up the blinking animations for the Rainy and Snowy avatars. We’ll learn how to adjust the eye design for each character and use different masking techniques to achieve unique, expressive blinks.

In this lesson, we’ll bring our avatar to life with a fun and elastic bounce animation that reacts to user clicks. You’ll learn how to combine Squash & Stretch, create looping motion in the State Machine, and use Elastic Mode to add natural decay and settling to your animation.

In this lesson, we’ll create smooth intro and outro animations for our character, using the Anticipation and Squash & Stretch principles to give it a sense of weight and realism. We'll make your avatar enter and exit naturally through the shadow, creating a seamless and lively transition between character states.

In this lesson, we’ll synchronize each avatar’s intro and outro animations to create smooth, dynamic transitions between the avatars whenever the weather changes.

In this lesson, we enhance the avatar’s transition by turning its shadow into a realistic hole using the Feather tool and inner shadows. We’ll also refine the masking setup and constraints to make the entire animation flow seamlessly from start to finish.

In this lesson, we’ll build a dedicated background component and create smooth transitions between backgrounds by animating directly through Transitions instead of Timelines.

In this lesson, we’ll update our Splash Screen with the new avatar and background components, giving it a fresh and polished look. We’ll also tidy up the file, organize timelines into folders, and make sure everything in our project is clean, structured, and ready for the next stage.

In this lesson we'll learn how to use Custom Events to send data and trigger actions outside your Rive file — enabling external communication between your Rive animation and your app or code.

In this lesson, we’ll learn how to let nested components send Events back to the main artboard — enabling clear, two-way communication between components and their parent. We’ll also export the Forecast Container into a separate component and use Events to communicate between them.

In this lesson, we’ll learn how to use Data Binding to make our animations fully dynamic. We’ll bind the current-degree font-size property to live data and explore different binding modes to control it at runtime.

In this lesson, we’ll learn how to bind text values to the View Model using Text Runs, and how to use Converters in Ryve to transform a numeric temperature value into text, making our forecast details fully dynamic.

In this lesson, we’ll learn how to use Data Binding to control state transitions across all components — replacing multiple local inputs with one shared property in the Main ViewModel.

In this lesson, we’ll apply Data Binding to our main WeatherBuddy app, connecting all components to a single shared ViewModel and cleaning up the old input and event logic.

In this bonus exercise, we’ll create a night mode for the avatar — so whenever night mode is enabled, the avatar smoothly transitions into a sleeping state.

This pro tip will make showing and hiding elements even easier — without using states at all. Use a Boolean property with a Converter to show or hide your elements (like the mask) directly, keeping your setup clean.

In this lesson, we learn how to use ViewModel Instances to manage multiple sets of forecast data—one for today and one for tomorrow—while keeping a single, clean data structure. We also connect these instances to different components, allowing the Main Screen to display multiple forecast days simultaneously.

In this lesson, we’ll update the CurrentWeather property based on the selected forecast instance. By combining Events and Listeners, we’ll make the background respond dynamically to whichever day is active.

In this lesson we'll build the full data structure for the Main Screen by creating a dedicated ForecastDay View Model and generating Instances for all four forecast days. This prepares the project for dynamic, data-driven updates.

In this lesson, we'll reconnect the background, avatar, and other UI elements so they read their values from the new Selected Forecast Instance, ensuring the interface responds correctly to data changes.

In this lesson we'll use Listeners to update the Selected Forecast Instance whenever a different day is selected, allowing the entire screen to switch dynamically between forecast days.

In this lesson we'll bind all text fields — temperature, ranges, and weather type — to the Selected Forecast Instance so the displayed details always match the currently selected day.

In this bonus exercise, you’ll extend your forecast instances a new Property - Sunset Time, that will represent the Sunset time of each forecast day

We’ll replace the static forecast buttons with a fully dynamic List that generates each day directly from the View Model. This allows the UI to scale automatically and stay perfectly synchronized with the forecast data.

We’ll replace the static forecast buttons with a fully dynamic List that generates each day directly from the View Model. This allows the UI to scale automatically and stay perfectly synchronized with the forecast data.

We’ll replace the static forecast buttons with a fully dynamic List that generates each day directly from the View Model. This allows the UI to scale automatically and stay perfectly synchronized with the forecast data.

Design a unique Heatwave background with a red hot sun and heat waves.

Add a rainy background with raindrops overlay.

Build the Clear Skies animation with a moving sun and glow.

Add a snowy background with parallex snow falling down

Add playful text effects like Wave or Fade to the splash screen logo.

Create idle expressions that add character to the the Avatars

Learn basic rigging and bones to link layers using constraint and create morph animation to shapes.

Create the logic for Time of Day and create dynamic background color according to the time of day: Dawn, Morning, Mid-day, Evening, Night using Blending .

Learn the basics of sliders and joysticks and controllers.

Apply a height slider to adjust avatar proportions.

Expand customization with multiple sliders using additive blending.

Adapt morphing logic for the avatars.

Learn the basics of responsive animation and design to make our app responsive to different screen sizes

Adapt your app to work seamlessly on different screen sizes.

Connect your Rive file to code and test on a real device.