What We're Building

A looping snow animation - particles falling top to bottom in a seamless loop, visible only during snowy weather.

Step 1 - Set Up the Component

1. Duplicate the Rain component

2. Rename it to Weather Snow

3. Delete all the content inside - we only need the shell

Step 2 - Create the Snow Particle

1. Switch to Design Mode.

2. Use the Ellipse tool to create a 30 x 30 px circle, with a white fill.

Step 3 - Layer Structure

Set up two nested groups:

1. Snow Shape - a single shape.

2. Snow Particles outer group - grouping all the particles.

Step 4 - Animate the Fall

1. Turn off Clip Content on the Artboard and set the work area to 2 seconds

2. Frame 0: position the particle above the Artboard

3. At 2 seconds: position it below the Artboard

Step 5 - Add Easing

Add ease-in: Set interpolation to Cubic and apply a subtle Ease In.

Step 6 - Create a Seamless Loop

1. Extend the work area to 4 seconds

2. Move one frame forward from end of first iteration

3. Copy and paste the animation for the second iteration

4. Set the last keyframe of iteration one to Hold

Step 7 - Slow Down the Tempo

Set the timeline Speed to 0.2 to slow down the animation. This gives the snow a natural, gentle falling speed.

Step 8 - Duplicate and Spread

1. Select the Snow Particles group

2. Duplicate it 4 times (5 total)

3. Switch to Design Mode and spread them horizontally

Step 9 - Offset the Timing

1. Switch to Animate Mode

2. Move work area to cover only the second iteration

3. Offset each particle's keyframes in time

Step 10 - Add Show/Hide Logic

1. Rename Rain / Show Rain to Snow / Show Snow

2. Show state: opacity 100%

3. Hide state: opacity 0%

4. Update condition to check for snow weather

5. In Design Mode, set Snow group to 0% opacity

Step 11 - Test It

1. Go to the main screen Artboard

2. Add the Weather Snow component

3. Switch to Snowy weather

What You've Built

• Snow particle with clean group structure

• Seamless two-iteration loop with subtle easing

• Staggered timing across 5 particles

• State Machine visibility for snowy weather only

Next: Part 2 - Adding Depth with Parallax.