Advanced SVG Animation Advanced SVG Animation

Step Animations & Rolling backgrounds

Sarah Drasner
Sarah Drasner
Microsoft

Step animations consists of moving one large animation sprite to show each “cell” of the animation. Removing the steps creates a rolling background effect. When multiple rolling background exists, Sarah demonstrates how staggering the durations can add a sense of depth to the scene.

Get Unlimited Access Now