Reveal after data loads

By default, an element reveals when it scrolls into view. Use when when your own state decides: for example, a list that animates in after a request finishes, or a panel that opens on a click.

With when, nothing observes the viewport. The element is revealed while when is true, and hidden while it is false.

React

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

function Results({ data }) {
  return (
    <Reveal as="ul" keyframes={slide()} when={data !== undefined} stagger={50}>
      {data?.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </Reveal>
  );
}

The list stays hidden while data is undefined. When data arrives, the list reveals and the items enter one after the other.

Vue

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

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

<template>
  <Reveal as="ul" :keyframes="slide()" :when="data !== undefined" :stagger="50">
    <li v-for="item in data" :key="item.id">{{ item.name }}</li>
  </Reveal>
</template>

Avoid a flash after hydration

If when is true from the start, the server renders the element shown, because nothing hides it. After hydration, the entrance starts at its first keyframe, so the element can flash. To avoid the flash, start with false, and set when to true after the first render.

Hide again

A change from true to false hides the element again. A change from false to true plays the animation again.

See Control the reveal manually for all the rules.