Final Project — Rive Masterclass

Progress

Up NextCreate Your First Artboard2:09

Getting Started

Index

VIDEOAll Lessons - Rive Masterclass Course Library

Part I

Course Intro

STEPWelcome

0:46

STEPFirst setup

STEPCreate a Live Interactive Character in 25 Min

23:52

RIVEFinal Project

STEPBefore We Start - Rive Editor Updates (MC)

Part II

Intro to Rive - Splash Screen Design

STEPCreate Your First Artboard

STEPWorking with Assets & Reference

STEPDesigning the Character

STEPGrouping & Layer Structure

Part III

Rive Basics - Splash Screen Animation

STEPCreate Your First Animation: Blinking

STEPAnimate a Logo & Character Entrance

STEPAdd Easing for Natural Motion

Part IV

State Machine Basics

STEPCreate your first State Machine

STEPParallel Animations with Layers

STEPTransition Between Reveal and Outro States

STEPTrigger Inputs

STEPBoolean Input: Day/Night Toggle

STEPSolo Groups for Weather Backgrounds

STEPNumeric Input: Weather Modes

STEPFinishing the Splash Screen

Utilities & File Management

STEPExporting and Sharing Your Animations

Create the Main Screen

STEPBuild the Main Weather Screen - Current Forecast

STEPUPDATE: Nested Artboards replaced by Components

STEPBuild the Main Weather Screen - Forecast Buttons

STEPUpdate: Listener Presets UI Update

STEPMake the Forecast Buttons Interactive with Listeners

STEPUpdate the Design Based on the Weather

STEPConstraints - Smart Layer Connections

Dynamic Weather Buddy

STEPCreate the Avatar Component

STEPConnecting Avatar Component to the Main Screen

STEPCreate the Blinking Animation - Clear Skies

STEPEye Tracking with Mouse or Touch

STEPCreate the Blinking Animation - Heatwave

STEPCreate the Blinking Animation - Rainy and Snowy

STEPCreate Interactive Bounce Animation

Seamless Weather Transitions

STEPCreate Seamless Intro and Outro Animations

STEPConnect Intro & Outro in the State Machine

STEPPerfecting the Avatar Transition with Feather and Advanced Masking

STEPCreating a Smooth Background Transition

STEPSplash Screen Revamp & File Cleanup

Custom Events

STEPCustom Events for External Communication

STEPCommunicate from Components to Parent Artboard

Data Binding Basics

STEPIntro to Data Binding

STEPBinding Weather Text Values & Using Converters

STEPUsing Data Binding for State Transitions

STEPUsing Data Binding in Our Main Project

Data Binding Basics - Exrc

STEPBonus Exercise - Avatar Night Mode

STEPPro Tip - Show & Hide Elements Without States

Data Binding Expert

STEPPart 1 - Creating the Data Structure & Instances

STEPPart 2 - Connecting the Components

STEPPart 3 - Updating the Selected Forecast Instance

STEPPart 4 - Binding the Forecast Details to the Selected Instance

Data Binding Expert - Exrc

STEPBonus Exercise - Sunset Time

Data Binding Master

STEPCreate Dynamic Forecast Button Component

STEPConnect the Button Component to the Forecast Container

STEPDynamic List for the Forecast Days

Weather Animations - Clear Skies

STEPCreate Clear Skies Glowing Sun

STEPCreating Sun Entry and Exit Animations Based on the Current Weather

STEPCreating Clouds Seamless Loop Idle Animation

STEPAdd Parallax Effect to the Clouds Idle

Weather Animations - Heatwave

STEPCreate Heatwave Red Sun Ripple Effect

STEPAnimating the Heatwave Ball: Anticipation & Overshoot

STEPControlling the Ball with State Machine Logic

Weather Animations - Rainy

STEPRain Animation with Trim Path

STEPAnimating the Leaf with Follow Path Constraint

Weather Animations - Snowy

STEPBuild the Core Snow Layer

STEPAdding Depth with Parallax

STEPExtending the Snow Scene

STEPBonus - Tree Reveal Animation

Scripting

STEPBonus - Snow Particle System with Scripting

Avatar Redesign & Modular Work

STEPAvatar Redesign - Clear Skies

EXERCISEAvatar Redesign Exercise

Data Binding Advanced

STEPData Binding Instances for Multi-Day Forecasts

STEPUpdating the CurrentWeather Property from the Selected Instance

Tom Acco

Instructor

Get Started

Rive editor looks different from the lesson? Let me know →