Stagger

Matt Perry

In this tutorial, we're going to build the Stagger example step-by-step.

This tutorial is rated beginner difficulty, which means we'll spend some time explaining the Motion APIs that we've chosen to use (and why), and also any browser APIs we encounter that might be unfamiliar to beginners.

Here's a live demo of the example we're going to be creating:

Introduction

The Stagger example shows how to create elegant sequential animations where multiple elements animate one after another with a delay between them. This example uses the animate function to animate multiple elements, and the stagger utility to control the timing between each animation.

Staggered animations are everywhere in modern UIs - from list items fading in on page load to menu items cascading open.

Get started

Let's start with four list items that are invisible by default:

<ul class="example">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<style>
    /** Copy styles from example source code */
<

Notice that each list item has opacity: 0, making them invisible when the page loads. We'll use Motion to animate them into view with a stagger effect.

Let's animate!

Import from Motion

First, import the functions we need from Motion:

import { animate, stagger } from "motion"

The animate function lets us animate any DOM element, and stagger is a special timing utility that creates sequential delays.

Create the staggered animation

Now we can animate all four list items with a single call to animate:

animate(".example li", { opacity: 1, y: [50, 0] }, { delay: stagger(0.05) })

Let's break down what's happening here:

First, animate accepts a CSS selector as its first argument - ".example li" targets all four list items at once.

The second argument defines what to animate. We're animating opacity: 1 to fade the elements in, and y: [50, 0] to move them from 50 pixels below their final position up to 0. Using an array like [50, 0] tells Motion to animate from the first value to the second, creating an upward sliding motion.

The third argument is where the magic happens. By setting delay: stagger(0.05), we're telling Motion to add a 0.05 second delay between each element's animation. So the first element animates immediately, the second starts 0.05 seconds later, the third at 0.1 seconds, and the fourth at 0.15 seconds. This creates the smooth cascading effect.

Without stagger, all four elements would animate at exactly the same time. The stagger utility makes it effortless to sequence animations across multiple elements.

Conclusion

We've built a staggered animation that brings list items into view one after another. This technique works with any number of elements and any CSS properties - try experimenting with different stagger delays, animation properties, or adding more list items to see how Motion automatically handles them all.