Progress
Utilities & File Management
🔗 Data Binding Expert - Exrc

/

❄️ Weather Animations - Snowy

/

Adding Depth with Parallax

What We're Building

Two additional snow layers (Medium and Small) with different particle sizes and speeds to create a parallax depth effect.

Step 1 - Create the Medium Layer

  1. Duplicate the Weather Snow component

  2. Rename it to Weather Snow Medium

  3. Resize all particles to 20 px

Step 2 - Adjust the Medium Layer

  1. Spread the particles to different Y positions

  2. Offset the keyframes differently from the large layer

  3. Set the timeline Speed to 0.15

Step 3 - Create the Small Layer

  1. Duplicate Weather Snow again

  2. Rename it to Weather Snow Small

  3. Resize all particles to 10 px

  4. Spread and offset differently

  5. Set the timeline Speed to 0.1

Step 4 - Add More Particles

Add 5 more particles to both the Medium and Small components to fill the scene, adjust their position and offset their timing.

Step 5 - Add to the Main Screen

  1. Go to the main screen Artboard

  2. Add Weather Snow Medium and Weather Snow Small components

Step 6 - Layer Order for Depth

Place the layers in the right order to create depth:

  1. Small particles - behind the avatar

  2. Medium and Large particles - in front of the avatar

Adjust as You Like

  • Add more snow particles, adjust the speed, change the position - whatever works for you

Speed Reference

  • Large: Speed 0.2

  • Medium: Speed 0.15

  • Small: Speed 0.1

What You've Built

  • Three snow layers with different particle sizes

  • Parallax depth through different animation speeds

  • Small particles behind the avatar for extra depth

Next: Part 3 - Snowman Animation.

Instructor

Add depth to the snowy scene using parallax layers that move at different speeds.

Snow Animation

Parallax Effect

Seamless Loop

Position Animation

Offset

Particle System

Rive Editor Updates