# Staggered list

> Reveal the items of a list or a grid one after the other on scroll with the stagger option. Try it live, then copy the code for your framework.

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.

* React

  ```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

  ```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

  ```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

  ```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>
  ```

  ```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](/examples/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](/examples/text-animation/).
* In React, always render the children. See [`useReveal`](/react/#the-usereveal-hook) for the rules with a hook.

## Next steps

[Stagger](/concepts/options/#stagger): Animate the children of an element one after the other.

[Springs](/concepts/keyframes/#springs): Make an animation overshoot and settle.

[Accessibility](/concepts/accessibility/): Reduced motion, screen readers and pages without JavaScript.

[Getting started](/getting-started/): Install the package for your framework.