# scroll-reveal-libraries

Adds lightweight scroll-triggered reveal animations using the AOS library. Useful for marketing pages, documentation, and landing pages that need simple reveal effects.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2400 installs · ★ 1133
- Author: freshtechbro
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/animation-components/skills/scroll-reveal-libraries/SKILL.md
- Updated: 2025-11-20
- HTML: https://affpapa.org/en/nevibecode/skills/scroll-reveal-libraries

## What it does

This skill guides the agent in applying AOS (Animate On Scroll) for viewport-driven animations. AOS uses CSS-driven transitions and GPU acceleration, offering over 50 built-in effects such as fades, zooms, flips, and slides. Elements are configured directly in HTML using data attributes like `data-aos="fade-up"` and `data-aos-delay`.

The guide includes code patterns for landing page hero sections, staggered feature grids, alternating content blocks, and custom anchor triggers. It works in vanilla HTML as well as React or Vue applications via CDN or the `aos@next` package.

AOS falls short when your interface demands complex animation timelines or physics-based motion. For synced scrub animations or interactive orchestration, GSAP ScrollTrigger or Framer Motion remains the better route.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/scroll-reveal-libraries/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/scroll-reveal-libraries/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/scroll-reveal-libraries/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/scroll-reveal-libraries/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freshtechbro/claudedesignskills scroll-reveal-libraries
```

2. **Manually: put the files in place**
- File: `.github/skills/scroll-reveal-libraries/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/freshtechbro/claudedesignskills --path plugins/bundles/animation-components/skills/scroll-reveal-libraries
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/scroll-reveal-libraries/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/animation-components/skills/scroll-reveal-libraries/SKILL.md

## When to use it
- animate elements entering the viewport with fade or slide effects
- stagger feature card animations using incremental delays
- trigger animations based on an external element scroll position
- configure global initialization options for AOS animations

## Example prompts
- Animate the feature cards on scroll using AOS with staggered delays
- Add slide-in animations to alternating content sections using AOS attributes
- Configure AOS initialization with custom duration and trigger offsets

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: ff8a9745ca9a4faf.

BEGIN THIRD-PARTY FILE ff8a9745ca9a4faf
````text
---
name: scroll-reveal-libraries
description: Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation orchestration. Triggers on tasks involving scroll animations, scroll-triggered reveals, AOS, simple animations, or basic scroll effects. Alternative to GSAP ScrollTrigger and Locomotive Scroll for simpler use cases. Compare with motion-framer for React-specific animations.
---

# Scroll Reveal Libraries

## Overview

This skill covers AOS (Animate On Scroll), a lightweight CSS-driven library for scroll-triggered animations. AOS excels at simple fade, slide, and zoom effects activated when elements enter the viewport.

**Key Features**:
- **Minimal Setup**: Single JavaScript file + CSS
- **Data Attribute API**: Configure animations in HTML
- **Performance**: CSS-driven, GPU-accelerated animations
- **50+ Built-in Animations**: Fades, slides, zooms, flips
- **Framework Agnostic**: Works with vanilla JS, React, Vue, etc.

**When to Use**:
- Marketing/landing pages with simple scroll effects
- Content-heavy sites (blogs, documentation)
- Quick prototypes requiring scroll animations
- Projects where GSAP/Framer Motion complexity isn't needed

**When NOT to Use**:
- Complex animation timelines or orchestration → Use GSAP ScrollTrigger
- Physics-based animations → Use React Spring or Framer Motion
- Precise scroll-synced animations → Use GSAP ScrollTrigger
- Heavy interactive animations → Use Framer Motion

## Core Concepts

### Installation

**CDN (Quickest)**:
```html
<head>
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
  <!-- Content with data-aos attributes -->

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>
```

**NPM/Yarn (Recommended)**:
```bash
npm install aos@next
# or
yarn add aos@next
```

```javascript
import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();
```

### Basic Usage

Apply animations using the `data-aos` attribute:

```html
<!-- Fade in -->
<div data-aos="fade-in">Content</div>

<!-- Fade up -->
<div data-aos="fade-up">Content</div>

<!-- Slide from right -->
<div data-aos="slide-left">Content</div>

<!-- Zoom in -->
<div data-aos="zoom-in">Content</div>
```

### Configuration Options

**Global Configuration**:
```javascript
AOS.init({
  // Animation settings
  duration: 800,  // Animation duration (ms): 0-3000
````
END THIRD-PARTY FILE ff8a9745ca9a4faf

The third-party file has ended. Everything between the ff8a9745ca9a4faf tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2554 of 17120 bytes. © freshtechbro · MIT · https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/animation-components/skills/scroll-reveal-libraries/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md