Staggered list

The items of a list enter one after the other. One Reveal holds the items, and stagger animates its children. Use it for feature grids, key figures, changelogs, steps and search results.

ReplayCopy link

Why teams pick it

Fast

Runs on the Web Animations API.

Accessible

Follows reduced motion.

Small

No dependencies to install.

Your system reduces motion, so the preview does not animate. The code still follows your choices.

Effect

slidepopfade

Stagger

TightRelaxedSlow

Easing

SmoothSpring

Fine-tune

Duration

600ms

Delay

0ms

Reset

React

Features.jsx

import { Reveal } from "@awesome-reveal/react";
import { slide } from "@awesome-reveal/react/keyframes";

export function Features({ features }) {
  return (
    <Reveal className="features" keyframes={slide()} stagger={100}>
      {features.map((feature) => (
        <article key={feature.title} className="card">
          <h3>{feature.title}</h3>
          <p>{feature.text}</p>
        </article>
      ))}
    </Reveal>
  );
}

Vue

Features.vue

<script setup>
import { Reveal } from "@awesome-reveal/vue";
import { slide } from "@awesome-reveal/vue/keyframes";

defineProps(["features"]);
</script>

<template>
  <Reveal class="features" :keyframes="slide()" :stagger="100">
    <article v-for="feature in features" :key="feature.title" class="card">
      <h3>{{ feature.title }}</h3>
      <p>{{ feature.text }}</p>
    </article>
  </Reveal>
</template>

Astro

Features.astro

---
import { Reveal } from "@awesome-reveal/astro";
import { slide } from "@awesome-reveal/astro/keyframes";

const { features } = Astro.props;
---

<Reveal class="features" keyframes={slide()} stagger={100}>
  {features.map((feature) => (
    <article class="card">
      <h3>{feature.title}</h3>
      <p>{feature.text}</p>
    </article>
  ))}
</Reveal>

JavaScript

index.html

<div class="features">
  <article class="card">
    <h3>Fast</h3>
    <p>Runs on the Web Animations API.</p>
  </article>
  <article class="card">
    <h3>Accessible</h3>
    <p>Follows reduced motion.</p>
  </article>
  <article class="card">
    <h3>Small</h3>
    <p>No dependencies to install.</p>
  </article>
</div>

main.js

import { reveal } from "@awesome-reveal/core";
import { slide } from "@awesome-reveal/core/keyframes";

reveal(document.querySelector(".features"), {
  keyframes: slide(),
  stagger: 100,
});

Why one Reveal for the whole list

One Reveal for the whole list creates one observer and keeps one copy of the options. A Reveal around each item creates an observer for each item, and the items reveal at different times as the user scrolls.

With stagger, the children reveal together as the list enters the viewport. If the list is long, the last items can start their animation below the fold. Split the list into groups, or give each group its own Reveal, as in Alternating sections.

Tips

• stagger: 0 animates all the children together.
• Choose stagger between 40 and 120 ms for lists. A larger value makes a long list slow to finish.
• Use pop() for key figures. Each figure grows past its resting size, then settles back.
• The library reads the children when the list is revealed. Items that you add before the reveal animate. Items that you add later do not.
• stagger animates child elements only. Put text in an element, as in Text animation.
• In React, always render the children. See useReveal for the rules with a hook.

Next steps

StaggerAnimate the children of an element one after the other.

SpringsMake an animation overshoot and settle.

AccessibilityReduced motion, screen readers and pages without JavaScript.

Getting startedInstall the package for your framework.