Build the Main Weather Screen - Forecast Buttons

All Lessons

Progress

🔥 Free Preview

00:46

Free

Free

Create a Live Interactive Character in 25 Min

23:52

Free

Free

Rive Intro - Design

Create Your First Artboard

2:09

Working with Assets & Reference

1:18

Before We Start - Rive Editor Updates

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

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

✏️

NEW

Scripting
Mini-Course →

Customizations & Rigging

Add Height Customization using Slider

Sliders, Joystick and Controllers Intro

Additive Blending for Multiple Customization

Create Customization Button and Popup

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.

/

Create the Main Screen

/

Build the Main Weather Screen - Forecast Buttons

Build the Main Weather Screen - Forecast Buttons

Join the course

11:45

Rive editor looks different from the lesson?

Let me know

Tom Acco

Instructor

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.

Design Tools

Rive Editor Updates