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.
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:
When to Use:
When NOT to Use:
This SKILL.md is the routing layer. Detailed recipes, examples, integration notes, and troubleshooting guidance live in references/details.md so they are loaded only when the task needs them.
Before producing concrete output, making a design recommendation, or debugging an implementation, load the relevant reference section below. Do not rely on memory for branch-specific APIs, examples, or caveats.
| Task branch | Read first |
|---|---|
| Core Concepts | references/details.md#core-concepts |
| Common Patterns | references/details.md#common-patterns |
| Integration Patterns | references/details.md#integration-patterns |
| Performance Optimization | references/details.md#performance-optimization |
| Common Pitfalls | references/details.md#common-pitfalls |
| Built-in Animations | references/details.md#built-in-animations |
| Custom Animations | references/details.md#custom-animations |
| Comparison with Alternatives | references/details.md#comparison-with-alternatives |
| Resources | references/details.md#resources |