All Lessons

Progress
🔥 Free Preview

👋 Welcome

00:46

Free

First setup

Free

Before We Start - Rive Editor Updates

Free

Create a Live Interactive Character in 25 Min

23:52

Free

Final Project

Free

Rive Intro - Design

Create Your First Artboard

2:09

Working with Assets & Reference

1:18

Designing the Character

9:42

Grouping & Layer Structure

4:10

Rive Basics - Animate

Create Your First Animation: Blinking

5:15

Animate a Logo & Character Entrance

4:37

Add Easing for Natural Motion

8:57

State Machine Basics

Create your first State Machine

2:18

Parallel Animations with Layers

2:32

Transition Between Reveal and Outro States

4:19

Trigger Inputs

3:43

Boolean Input: Day/Night Toggle

5:43

Solo Groups for Weather Backgrounds

4:47

Numeric Input: Weather Modes

6:12

Finishing the Splash Screen

9:22

Utilities & File Management

Exporting and Sharing Your Animations

6:02

Create the Main Screen

Build the Main Weather Screen - Current Forecast

14:34

UPDATE: 
Nested Artboards → Components

📣

Build the Main Weather Screen - Forecast Buttons

11:45

Update: Listener Presets UI Update

📣

Make the Forecast Buttons Interactive with Listeners

8:18

Update the Design Based on the Weather

10:37

Constraints – Smart Layer Connections

16:06

Dynamic Weather Buddy

Create the Avatar Component

14:46

Connecting Avatar Component to the Main Screen

4:14

Create the Blinking Animation - Clear Skies

9:29

Eye Tracking with Mouse or Touch

10:34

Create the Blinking Animation - Heatwave

13:22

Create the Blinking Animation - Rainy and Snowy

13:33

Create Interactive Bounce Animation

16:37

Seamless Weather Transitions

Create Seamless Intro and Outro Animations

11:29

Connect Intro & Outro in the State Machine

8:44

Perfecting the Avatar Transition with Feather and Advanced Masking

15:55

Creating a Smooth Background Transition

16:22

Splash Screen Revamp & File Cleanup

7:12

⚡️ Custom Events

Custom Events for External Communication

8:25

Communicate from Components to Parent Artboard

14:58

🔗 Data Binding Basics

Intro to Data Binding

13:33

Binding Weather Text Values & Using Converters

8:50

Using Data Binding for State Transitions

14:41

Using Data Binding in Our Main Project

22:59

📝 Data Binding Basics - Exrc

Bonus Exercise - Avatar Night Mode

✏️

👑 Pro Tip – Show & Hide Elements Without States

3:11

🔗 Data Binding Advanced

Data Binding Instances for Multi-Day Forecasts

13:17

Updating the CurrentWeather Property from the Selected Instance

11:16

🔗 Data Binding Expert | Main Project

Part 1 - Creating the Data Structure & Instances

9:24

Part 2 - Connecting the Components

4:03

Part 3 - Updating the Selected Forecast Instance

10:35

Part 4 - Binding the Forecast Details to the Selected Instance

03:52

🔗 Data Binding Expert - Exrc

☀️ Bonus Exercise - Sunsnet Time

✏️

👑 Data Binding Master

Create Dynamic Forecast Button Component

9:22

Connect the Button Component to the Forecast Container

10:12

Dynamic List for the Forecast Days

7:22

☀️ Weather Animation - Clear Skies

Create Clear Skies Glowing Sun

7:05

Creating Sun Entry and Exit Animations Based on the Current Weather

8:02

Creating Clouds Seamless Loop Idle Animation

13:41

Add Parallax Effect to the Clouds Idle

7:27

🌡️ Weather Animation - Heatwave

Create Heatwave Red Sun Ripple Effect

15:41

Animating the Heatwave Ball: Anticipation & Overshoot

14:42

Controlling the Ball with State Machine Logic

5:30

☔️ Weather Animation - Rainy

Rain Animation with Trim Path

17:26

Animating the Leaf with Follow Path Constraint

16:46

❄️ Weather Animation - Snowy (Exrc)

Build the Core Snow Layer

✏️

Adding Depth with Parallax

✏️

Extending the Snow Scene

✏️

Bonus - Tree Reveal Animation

✏️

Scripting & AI Agent

Bonus - Snow Particle System with Scripting

just release

Rive Scripting
Course →
Avatar Redesign & Modular Work

Avatar Redesign - Clear Skies

Avatar Redesign Exercise

✏️

Customizations & Rigging

Rigging and Bones Intro

Basic Rigging Applied - Heatwave Tongue

Rigging Exercise - Rainy Scarf

Rigging Exercise - Snowy Clothing Flutter

Advanced Rigging - Tree Branches Chain

Responsive Animations

Responsive Design Intro

Make the forecast control scrollable

Make the Design Responsive

Launch the App 👑

Clean Up & Optimize Performance - Bonus

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

All Lessons

/

Time of Day Logic

/

Darkness Overlay by Time of Day

Darkness Overlay by Time of Day

Tom Acco

Instructor

Add a darkness overlay that fades in across the scene based on the time of day.

Rive Editor Updates