Loading: Jumping dots

Matt Perry

In this tutorial, we're going to build the Loading: Jumping dots 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 Jumping dots example shows how to create an animated loading indicator with three dots that bounce up and down in sequence. This playful animation pattern is perfect for loading states where you want to add some personality.

This example uses the animate function with the stagger function to create a wave effect as each dot animates in sequence.

Get started

Let's start with the basic HTML structure:

<div class="container">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: var(--hue-1);
        will-change: transform;
    }
<

Let's animate!

Import from Motion

Import the functions we need:

<script type="module">
    import { animate, stagger } from "motion"
</script>

Select the dots

Get references to all the dot elements:

const dots = document.querySelectorAll(".dot")

Create the jumping animation

Animate the dots with a mirrored repeat:

animate(
    dots,
    { transform: "translateY(-30px)" },
    {
        duration: 0.6,
        repeat: Infinity,
        repeatType: "mirror",
        ease: "easeInOut",
        delay: stagger(0.2, { startDelay: -0.5 }),
    }
)

The transform: "translateY(-30px)" moves each dot 30 pixels upward. The repeatType: "mirror" makes the animation play in reverse after completing, creating a smooth up-and-down bounce.

Why use transform directly?

We're using transform: "translateY(-30px)" instead of the shorthand y: -30. Animating the transform property directly enables hardware-accelerated animations, which run on the GPU rather than the CPU. This is especially important during loading sequences, as loading is typically a time of heavy CPU load. By offloading the animation to the GPU, the dots remain smooth even when the main thread is busy. Learn more about web animation performance.

The stagger(0.2, { startDelay: -0.5 }) creates a 0.2 second delay between each dot. The startDelay: -0.5 starts the animation partway through, so the dots begin in a staggered state rather than all starting together.

Conclusion

We've built an engaging jumping dots animation using Motion's animate and stagger functions. The repeatType: "mirror" creates smooth bouncing, while stagger with startDelay ensures the dots start in a visually interesting state.