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 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 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.

Learn what Data Binding is and how it replaces manual Inputs.

Replace Inputs with bound values using ViewModels, Instances, and Converters.

Bind key values like weatherIndex, hour, and jump to data.

Turn the forecast into a dynamic artboard connected to the weather instances.

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

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

Add a rainy background with raindrops overlay.

Build a snowy background with falling snow. Creating a sense of dept using parallex effect.

Connect all weather modes with seamless animated transitions.

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

Create a celebratory entry animation and explore the Animations property using State machine, Simple animation and Remap

Create idle expressions that add character to the Clear avatar.

Animate Heatwave avatar adding a sweath animation.

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

Animate the Rainy avatar umprella and scarf using basic riggings and bones

Animate the Snow avatar with playful, chilly expressions making it shake.

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 .

Apply hour logic to update, Heatwave, Rainy, and Snowy backgrounds.

Move the sun’s position across the screen based on the hour.

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 Heatwave avatar.

Adapt morphing logic for the Snowy avatar.

Adapt morphing logic for the Rainy avatar.

Create the Customize Button that open the Customization Drawer, and add intro and outro animation to it

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

Turn the main screen into a nested artboard for modular reuse.

Make the forecast control scrollable

Adapt your app to work seamlessly on different screen sizes.

Add sound effects for buttons, jumps, and transitions.

Build smooth transitions from splash to main screen.

Remove unused assets and enable performance mode.

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