Create a Live Interactive Character in 25 Min — Rive Masterclass

Rive Masterclass

Welcome 👋

Free lessons unlocked. Start anywhere

0 of 95 lessons0%

Sign in Join Masterclass

Course Intro

Create a Live Interactive Character in 25 Min

Before We Start - Rive Editor Updates

Intro to Rive - Splash Screen Design

Create Your First Artboard

Working with Assets & Reference

Designing the Character

Grouping & Layer Structure

Rive Basics - Splash Screen Animation

Create Your First Animation: Blinking

Animate a Logo & Character Entrance

Add Easing for Natural Motion

State Machine Basics

Create your first State Machine

Parallel Animations with Layers

Transition Between Reveal and Outro States

Boolean Input: Day/Night Toggle

Solo Groups for Weather Backgrounds

Numeric Input: Weather Modes

Finishing the Splash Screen

Utilities & File Management

Exporting and Sharing Your Animations

Create the Main Screen

Build the Main Weather Screen - Current Forecast

UPDATE: Nested Artboards replaced by Components

Build the Main Weather Screen - Forecast Buttons

Update: Listener Presets UI Update

Make the Forecast Buttons Interactive with Listeners

Update the Design Based on the Weather

Constraints - Smart Layer Connections

Dynamic Weather Buddy

Create the Avatar Component

Connecting Avatar Component to the Main Screen

Create the Blinking Animation - Clear Skies

Eye Tracking with Mouse or Touch

Create the Blinking Animation - Heatwave

Create the Blinking Animation - Rainy and Snowy

Create Interactive Bounce Animation

Seamless Weather Transitions

Create Seamless Intro and Outro Animations

Connect Intro & Outro in the State Machine

Perfecting the Avatar Transition with Feather and Advanced Masking

Creating a Smooth Background Transition

Splash Screen Revamp & File Cleanup

Custom Events

Custom Events for External Communication

Communicate from Components to Parent Artboard

Data Binding Basics

Intro to Data Binding

Binding Weather Text Values & Using Converters

Using Data Binding for State Transitions

Using Data Binding in Our Main Project

Bonus Exercise - Avatar Night Mode

Pro Tip - Show & Hide Elements Without States

Data Binding Advanced

Data Binding Instances for Multi-Day Forecasts

Updating the CurrentWeather Property from the Selected Instance

Data Binding Expert

Part 1 - Creating the Data Structure & Instances

Part 2 - Connecting the Components

Part 3 - Updating the Selected Forecast Instance

Part 4 - Binding the Forecast Details to the Selected Instance

Bonus Exercise - Sunset Time

Data Binding Master

Create Dynamic Forecast Button Component

Connect the Button Component to the Forecast Container

Dynamic List for the Forecast Days

Weather Animations - Clear Skies

Create Clear Skies Glowing Sun

Creating Sun Entry and Exit Animations Based on the Current Weather

Creating Clouds Seamless Loop Idle Animation

Add Parallax Effect to the Clouds Idle

Weather Animations - Heatwave

Create Heatwave Red Sun Ripple Effect

Animating the Heatwave Ball: Anticipation & Overshoot

Controlling the Ball with State Machine Logic

Weather Animations - Rainy

Rain Animation with Trim Path

Animating the Leaf with Follow Path Constraint

Weather Animations - Snowy

Build the Core Snow Layer

Adding Depth with Parallax

Extending the Snow Scene

Bonus - Tree Reveal Animation

Scripting

Bonus - Snow Particle System with Scripting

Just ReleasedRive Scripting Course →

Avatar Redesign & Modular Work

Avatar Redesign - Clear Skies

Avatar Redesign Exercise

Unique Avatar Personality

Clear Skies Shine Effect

Clear Skies Soda Bubbles

Heatwave Shine Effect

Heatwave Sweat Drops

Intro to Rigging

Intro to Rigging

Animate the Tongue: The Wiggle

Rigging Exercise - Rainy Scarf

Rigging Exercise - Snowy Clothing Flutter

Advanced Rigging

Advanced Rigging - Tree Branches Chain

Rigging Exercise - Tree Branches

Advanced Component Communication

Sync the Umbrella with the Jump

Sync the Puddle with the Jump

Animation Blending

Add Snow Depth with Blending

Make Your Own Blend

Responsive Animations

Intro to Responsive Design

Make the Background Responsive

Responsive Weather Layers

Position the Elements

Make the Forecast Scrollable

Responsive Weather Foreground

Launch your App

Vibe Coding & Your Setup

See Your Animation Running Live on a Device

Take It Further

Your Certificate

Congrats, You're a Rive Master

Bonus: Avatar Customization

Create Edit Mode

Intro to Sliders

Slider to Avatar Width with Additive Blending

Additive Blending - Element Size

Bonus: Sound Effects

Add Sound Effects to Animations

Bonus: Performance

Clean Up & Optimize Performance - Bonus

Tom Acco

Instructor

Rive editor looks different from the lesson?

Create a Live Interactive Character in 25 Min — Rive Masterclass