Progress
🔥 Free Preview
Rive Basics - Animate
Create the Main Screen
Dynamic Weather Buddy
⚡️ Custom Events
🔗 Data Binding Basics
📝 Data Binding Basics - Exrc
🔗 Data Binding Advanced
🔗 Data Binding Expert | Main Project
👑 Data Binding Master
☀️ Weather Animation - Clear Skies
🌡️ Weather Animation - Heatwave
☔️ Weather Animation - Rainy
❄️ Weather Animation - Snowy (Exrc)
What We're Building
In this exercise, we'll create an entrance and exit animation for the snowman. The snowman assembles part by part when snowy weather is active, and disassembles when it's not.

Step 1 - Set Up the Component
Duplicate an existing Snow component Artboard
Rename it to Weather-Snow-Scene
Delete the snow particles and the idle snow animation
Clean up the State Machine - remove the snow animation layer, keep only the Show/Hide logic
Import the Snowman SVG from the Assets Panel
Drag it into the Artboard and position it center, slightly below middle

Step 2 - Organize the Layers
The imported SVG has two clusters: the snowman on the right and a pile of snow on the left.
For the snowman (right side), split into 4 groups:
Base - the bottom base shape
Bottom - the lower body ball
Middle - the round shape + buttons
Top - the hat, eyes, and nose
Group all 4 into: Snowman
For the snow pile (left side), split into 3 groups: Bottom, Middle, Top.
Group them into: Snow-Pile
Wrap everything in: Scene-M

Step 3 - Animate All Parts
Switch to Animate Mode and create a timeline called Show (One Shot).
Animate all parts with the same animation first, then offset them for the staggered effect.
Select all parts (Snowman + Snow groups) and animate them together:
Last keyframe: final resting Position Y (frame 20)
First keyframe: Position Y 40 pixel higher (frame 0)
Opacity: 0% at start (frame 0), advance 1 frame 100% (frame 1)

Step 4 - Add Easing and Offset
Add Ease In to the keyframes (slow start, fast fall)

Stagger the timing with offsets:
Base lands first
Bottom follows
Middle next
Top lands last
Snow pile parts offset slightly after the snowman

Step 5 - Set Up the Hide Animation
Instead of building a separate exit timeline, we reuse the same one.
Watch the short video explaining Negative Speed:
In the State Machine, when we assign the Show timeline to the Hide state, we simply set its Speed to -1. Same timeline, played in reverse.
Make sure the Work Area covers the full timeline duration so the reversed animation starts immediately.
Step 6 - Set Up the State Machine
This part requires a specific approach. Watch the short video to understand why:
Create a State Machine with 3 states:
Start - snowman hidden, no animation
Show - plays the Show timeline (Speed 1)
Hide (Reverse Show) - plays the same Show timeline (Speed -1)
Why not Any State? Both Show and Hide contain animations. If the State Machine starts with Any State, it must immediately go to one of them - meaning the snowman would play an entrance or exit even when the weather isn't snowy. The Start state keeps it invisible with zero animation. The show/hide cycle only begins when snow weather triggers the first transitio
Step 7 - Connect to Weather Logic
Weather = Snow - transition to Show
Weather leaves Snow - transition to Show (reverse)
Step 8 - Add to Main Screen
Drag the Weather Snow Scene component into the Main Screen
Position it behind the avatar

What You've Built
Staggered part-by-part snowman entrance (4 body parts + snow pile)
Reversed exit using the same timeline with negative speed (-1)
Clean State Machine with neutral Start state
