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

1. Duplicate an existing Snow component Artboard

2. Rename it to Weather-Snow-Scene

3. Delete the snow particles and the idle snow animation

4. Clean up the State Machine - remove the snow animation layer, keep only the Show/Hide logic

5. Import the Snowman SVG from the Assets Panel

6. 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:

1. Base - the bottom base shape

2. Bottom - the lower body ball

3. Middle - the round shape + buttons

4. 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:

1. Base lands first

2. Bottom follows

3. Middle next

4. Top lands last

5. 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:

1. Start - snowman hidden, no animation

2. Show - plays the Show timeline (Speed 1)

3. 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

1. Drag the Weather Snow Scene component into the Main Screen

2. 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