Scroll Reveal Libraries
Add lightweight scroll-triggered fade and slide effects on marketing or content pages without pulling in GSAP or Framer Motion.
Overview
Scroll-reveal-libraries is an agent skill for the Build phase that guides AOS setup and data-attribute configuration for simple scroll-triggered reveals on marketing and content sites.
Install
npx skills add https://github.com/freshtechbro/claudedesignskills --skill scroll-reveal-librariesWhat is this skill?
- Covers AOS (Animate On Scroll) with a single JS file plus CSS and a data-attribute API
- 50+ built-in animations: fades, slides, zooms, and flips with GPU-friendly CSS
- Framework-agnostic: vanilla JS, React, Vue, and similar stacks
- Explicit when-not-to-use: complex timelines → GSAP; physics → Framer Motion or React Spring
- Positioned as the simpler alternative to GSAP ScrollTrigger and Locomotive Scroll
- single JavaScript file + CSS setup
Adoption & trust: 732 installs on skills.sh; 227 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want landing-page scroll polish but do not need GSAP timelines or a React motion library for basic fade-and-slide reveals.
Who is it for?
Solo builders shipping marketing sites, landing pages, or content-heavy frontends who want one lightweight reveal library and clear upgrade paths.
Skip if: Teams needing orchestrated scroll timelines, physics-based motion, or precise scroll-scrubbed storytelling—use GSAP or Framer Motion per the skill’s guidance.
When should I use this skill?
Building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide scroll effects; tasks involving AOS, scroll-triggered reveals, or simple scroll animations.
What do I get? / Deliverables
You get a working AOS integration pattern with clear boundaries on when to graduate to GSAP ScrollTrigger or Framer Motion instead.
- AOS init snippet and CSS includes
- Data-attribute patterns on target sections
- Guidance on when to switch to GSAP or Framer Motion
Recommended Skills
Journey fit
Scroll-reveal setup is front-end implementation work on pages you are already building, not discovery or launch distribution. AOS wiring, data attributes, and CSS live in the frontend layer alongside layout and component work.
How it compares
Use for CSS-driven AOS reveals instead of GSAP ScrollTrigger or Locomotive when complexity stays at fade/slide-on-enter.
Common Questions / FAQ
Who is scroll-reveal-libraries for?
Indie builders and agents implementing frontend marketing pages who need scroll-triggered animations without a full motion stack.
When should I use scroll-reveal-libraries?
During Build frontend work when tasks mention scroll animations, AOS, scroll-triggered reveals, or basic effects on landing or blog pages.
Is scroll-reveal-libraries safe to install?
Review the Security Audits panel on this Prism page before installing; the skill is documentation for a client-side library, not a privileged system tool.
SKILL.md
READMESKILL.md - Scroll Reveal Libraries
# 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 delay: 0, // Delay before animation (ms): 0-3000 offset: 120, // Offset from trigger point (px) easing: 'ease', // Easing function once: false, // Animate only once (true) or every time (false) mirror: false, // Animate out when scrolling past // Placement anchorPlacement: 'top-bottom', // Which position triggers animation // Performance disable: false, // Disable on mobile/tablet startEvent: 'DOMContentLoaded', // Initialization event debounceDelay: 50, // Window resize debounce throttleDelay: 99 // Scroll throttle }); ``` **Per-Element Overrides**: ```html <div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200" data-aos-offset="50" data-aos-easing="ease-in-out" data-aos-once="true" data-aos-mirror="true" data-aos-anchor-placement="center-bottom" > Custom configured element </div> ``` ## Common Patterns ### 1. Landing Page Hero Section ```html <section class="hero"> <!-- Staggered heading words --> <h1 data-aos="fade-down" data-aos-duration="800" > Welcome to the Future </h1> <!-- Delayed subheading --> <p data-aos="fade-up" data-aos-delay="200" data-aos-duration="600" > Transform your ideas into reality </p> <!-- CTA button --> <button data-aos="zoom-in" data-aos-delay="400" data-aos-duration="500" > Get Started </button> </section> ``` ### 2. F