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 variants to define the jump animation and staggerChildren to create the wave effect as each dot animates in sequence.

Get started

Let's start with the basic Vue structure:

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

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

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff0088;
  will-change: transform;
}
<

Let's animate!

Import from Motion

Import the motion component:

<script setup>
import { motion } from "motion-v"
</script>

Define the jump animation

Create the variants object that defines the jump animation:

<script setup>
import { motion } from "motion-v"

const dotVariants = {
  jump: {
    transform: "translateY(-30px)",
    transition: {
      duration: 0.8,
      repeat: Infinity,
      repeatType: "mirror",
      ease: "easeInOut",
    },
  },
}
</script>

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.

Apply the animation with stagger

Convert the elements to motion components and apply the staggered animation:

<template>
  <motion.div
    class="container"
    animate="jump"
    :transition="{ staggerChildren: -0.2, staggerDirection: -1 }"
  >
    <motion.div class="dot" :variants="dotVariants" />
    <motion.div class="dot" :variants="dotVariants" />
    <motion.div class="dot" :variants="dotVariants" />
  </motion.div>
</template>

The staggerChildren: -0.2 creates a 0.2 second delay between each dot's animation start. The staggerDirection: -1 reverses the order so the last dot starts first.

Conclusion

We've built an engaging jumping dots animation using Motion's variant and stagger systems. The repeatType: "mirror" creates smooth bouncing, while staggerChildren orchestrates the wave effect across all three dots.

Motion+