Add reveal animations

Use the Reveal component, or the vReveal directive on an element that you render. Cascade and vCascade reveal the children of an element in sequence. The directive follows reactive options.

The package loads its stylesheet, which hides the content until it reveals. Do not import the stylesheet, except in an Astro island.

In an Astro island, add import "@awesome-reveal/vue/reveal.css"; to the frontmatter of the page or the layout that renders the island. Astro collects the CSS of a page from the server build, which does not import the stylesheet.

Hydrate reveal content eagerly, for example with client:load in an Astro island. Do not use hydrateOnVisible() or a Nuxt hydrate-on-visible component for it. The stylesheet hides the server markup for at most 5 seconds. If the script attaches later, the content shows, then hides again until it reveals.

The stylesheet replaces a CSS animation of the hidden element or of a cascade child until the reveal, so put your own animation on an inner element.

<script setup lang="ts">
import { Cascade, Reveal, vReveal } from "@awesome-reveal/vue";
</script>

<template>
  <Reveal from="left">Hello</Reveal>
  <p v-reveal="{ from: { opacity: 0 }, delay: 100 }">Fade only</p>
  <Cascade as="ul" :interval="120">
    <li>Fast</li>
    <li>Small</li>
  </Cascade>
</template>

The same API in a render function:

import { h } from "vue";
import { Cascade, Reveal } from "@awesome-reveal/vue";
export const card = h(Reveal, { from: "left" }, () => "Hello");
export const list = h(Cascade, { as: "ul", interval: 120 }, () => [
  h("li", "Fast"),
  h("li", "Small"),
]);

Set from to "top", "right", "bottom" or "left" for an entrance that starts transparent and 24px away on that side. The defaults are from: "bottom", duration: 600 (milliseconds), delay: 0 (milliseconds) and threshold: 0. Without when, the entrance plays one time.