# Adding Reveal Animations

Adds reveal-on-scroll animations with reveal() and cascade() from @awesome-reveal/core...

- Repository: https://github.com/awesome-reveal/awesome-reveal (1193 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add awesome-reveal/awesome-reveal --skill adding-reveal-animations -g -a claude-code -y`
Codex: `npx skills add awesome-reveal/awesome-reveal --skill adding-reveal-animations -g -a codex -y`
Cursor: `npx skills add awesome-reveal/awesome-reveal --skill adding-reveal-animations -g -a cursor -y`
Gemini CLI: `npx skills add awesome-reveal/awesome-reveal --skill adding-reveal-animations -g -a gemini-cli -y`

## Description

Adds reveal-on-scroll animations with reveal() and cascade() from @awesome-reveal/core and native Web Animations keyframes. Use when you animate elements that enter the viewport in plain JavaScript or TypeScript.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Add reveal animations

Use `reveal(target, options?)` to animate each target element when it enters the viewport. Use `cascade(container, options?)` to animate the direct element children of a container in sequence. Both functions return only `{ dispose() }`. Call `dispose()` when you remove the targets before they reveal. After all the entrances of a call finish, the call needs no `dispose()`.

Core needs no stylesheet. It creates a paused native animation for each element when you call it. Code that waits for all page animations to finish must skip the paused ones. Core does not hide server-rendered content. Only the framework packages do that.

```ts
import { reveal, cascade } from "@awesome-reveal/core";
const handle = reveal(".card", { from: "left" });
cascade(".features", { interval: 80 });
handle.dispose();
```

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`. The entrance plays one time.

A `from` object is the complete start state: `{ opacity: 0 }` is a pure fade, and `{ scale: 0.9 }` adds no fade and no movement. A number is in pixels for `x`, `y` and `blur`, and in degrees for `rotate`. A string can contain a CSS value with its unit. The entrance animates only the properties that the start state sets, and ends at their neutral values: no offset, no rotation, no blur, a scale of 1 and an opacity of 1. The element's own `transform` stays in effect. The element's own values of the animated properties do not apply until the entrance ends, so put them on an inner element when they must apply during the entrance. Prefer a start state without `blur` on pages that must stay smooth: with a blur, Chromium runs the full entrance on the main thread.

The rest: https://github.com/awesome-reveal/awesome-reveal/blob/HEAD/packages/core/skills/adding-reveal-animations/SKILL.md