scroll-reveal-libraries
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.
Security Assessment
About scroll-reveal-libraries
scroll-reveal-libraries is a front-end animation skill covering AOS (Animate On Scroll), a lightweight, CSS-driven library for scroll-triggered reveal effects. It solves the need for simple fade, slide, zoom, and flip animations that fire when elements enter the viewport, without the complexity of full timeline orchestration tools. The skill is explicit about when AOS is the right choice and when to reach for alternatives like GSAP ScrollTrigger, React Spring, or Framer Motion instead.
It documents installation via CDN or npm, the data-attribute API for declaring animations directly in HTML, and global configuration (duration, delay, offset, easing, once, mirror, anchor placement, and performance settings like debounce and throttle) plus per-element overrides. Common patterns include animated landing-page hero sections and staggered feature-card grids. Bundled assets provide production-ready integration examples for React (including a reusable wrapper component and handling dynamic content with AOS.refresh), React Router, Next.js (pages router and TypeScript), and Vue, along with reference docs for the AOS API and an animation catalog, plus Python helper scripts for config building and generation.
It targets web developers building marketing pages, landing pages, blogs, documentation, and quick prototypes that need basic scroll animations. The content is guidance, example code, and local helper scripts using standard install commands and public CDN links for the AOS library; it performs no destructive operations, handles no credentials, and executes no remote code.
FAQ
What is AOS best suited for?
Simple scroll-triggered fade, slide, and zoom effects on marketing pages, landing pages, and content-heavy sites where full animation orchestration is unnecessary.
When should I use something else?
For complex timelines or precise scroll-synced animation use GSAP ScrollTrigger; for physics-based motion use React Spring or Framer Motion; for heavy interactive animation use Framer Motion. The skill states these trade-offs directly.
How do I configure animations?
Declaratively via data-aos attributes in HTML, with global defaults set in AOS.init() (duration, delay, offset, easing, once, mirror) and per-element overrides using data-aos-* attributes.
Does it work with React, Next.js, and Vue?
Yes. The bundled examples cover React (with a reusable wrapper and AOS.refresh for dynamic content), React Router, Next.js (including TypeScript), and Vue.
How is AOS loaded?
Either from a public CDN (unpkg) with a stylesheet and script, or installed via npm/yarn (aos@next) and imported along with its CSS.
Install scroll-reveal-libraries
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
freshtechbro/claudedesignskills