/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,
$ npx -y skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/scroll-reveal-libraries
Context preview
The summary Claude sees to decide when to auto-load this skill.
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,
SKILL.md
scroll-reveal-libraries.SKILL.mdname: 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)**:
<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)**:
npm install aos@next
# or
yarn add aos@next
import AOS from 'aos';
import 'aos/dist/aos.css';
AOS.init();
Basic Usage
Apply animations using the `data-aos` attribute:
<!-- 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**:
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**:
<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
<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. Feature Cards Grid
<div class="features-grid">
<!-- Stagger cards with increasing delays -->
<div
class="feature-card"
data-aos="fade-up"
data-aos-duration="600"
data-aos-delay="0"
>
<h3>Feature 1</h3>
<p>Description...</p>
</div>
<div
class="feature-card"
data-aos="fade-up"
data-aos-duration="600"
data-aos-delay="100"
>
<h3>Feature 2</h3>
<p>Description...</p>
</div>
<div
class="feature-card"
data-aos="fade-up"
data-aos-duration="600"
data-aos-delay="200"
>
<h3>Feature 3</h3>
<p>Description...</p>
</div>
</div>3. Alternating Content Sections
<!-- Content from left -->
<div class="section">
<div
class="content"
data-aos="slide-right"
data-aos-duration="800"
>
<h2>Section Title</h2>
<p>Content slides in from left...</p>
</div>
<img
src="image1.jpg"
data-aos="fade-left"
data-aos-delay="200"
/>
</div>
<!-- Content from right -->
<div class="section reverse">
<img
src="image2.jpg"
data-aos="fade-right"
/>
<div
class="content"
data-aos="slide-left"
data-aos-duration="800"
data-aos-delay="200"
>
<h2>Section Title</h2>
<p>Content slides in from right...</p>
</div>
</div>4. Scroll-Triggered Testimonials
<div class="testimonials">
<div
class="testimonial"
data-aos="zoom-in"
data-aos-duration="500"
>
<blockquote>"Amazing product!"</blockquote>
<cite>- John Doe</cite>
</div>
<div
class="testimonial"
data-aos="zoom-in"
data-aos-duration="500"
data-aos-delay="100"
>
<blockquote>"Exceeded expectations"</blockquote>
<cite>- Jane Smith</cite>
</div>
</div>5. Custom Anchor Triggers
Trigger animations based on a different element's scroll position:
<!-- Fixed sidebar animates based on main content scroll -->
<div class="main-content">
<div id="trigger-point" data-aos-id="sidebar-trigge
Read more
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)**:
<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)**:
npm install aos@next # or yarn add aos@next
import AOS from 'aos'; import 'aos/dist/aos.css'; AOS.init();
Basic Usage
Apply animations using the `data-aos` attribute:
<!-- 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**:
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**:
<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
<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. Feature Cards Grid
<div class="features-grid">
<!-- Stagger cards with increasing delays -->
<div
class="feature-card"
data-aos="fade-up"
data-aos-duration="600"
data-aos-delay="0"
>
<h3>Feature 1</h3>
<p>Description...</p>
</div>
<div
class="feature-card"
data-aos="fade-up"
data-aos-duration="600"
data-aos-delay="100"
>
<h3>Feature 2</h3>
<p>Description...</p>
</div>
<div
class="feature-card"
data-aos="fade-up"
data-aos-duration="600"
data-aos-delay="200"
>
<h3>Feature 3</h3>
<p>Description...</p>
</div>
</div>3. Alternating Content Sections
<!-- Content from left -->
<div class="section">
<div
class="content"
data-aos="slide-right"
data-aos-duration="800"
>
<h2>Section Title</h2>
<p>Content slides in from left...</p>
</div>
<img
src="image1.jpg"
data-aos="fade-left"
data-aos-delay="200"
/>
</div>
<!-- Content from right -->
<div class="section reverse">
<img
src="image2.jpg"
data-aos="fade-right"
/>
<div
class="content"
data-aos="slide-left"
data-aos-duration="800"
data-aos-delay="200"
>
<h2>Section Title</h2>
<p>Content slides in from right...</p>
</div>
</div>4. Scroll-Triggered Testimonials
<div class="testimonials">
<div
class="testimonial"
data-aos="zoom-in"
data-aos-duration="500"
>
<blockquote>"Amazing product!"</blockquote>
<cite>- John Doe</cite>
</div>
<div
class="testimonial"
data-aos="zoom-in"
data-aos-duration="500"
data-aos-delay="100"
>
<blockquote>"Exceeded expectations"</blockquote>
<cite>- Jane Smith</cite>
</div>
</div>5. Custom Anchor Triggers
Trigger animations based on a different element's scroll position:
<!-- Fixed sidebar animates based on main content scroll --> <div class="main-content"> <div id="trigger-point" data-aos-id="sidebar-trigge
Professional design agency skillstack for 3D/WebGL, animation, and modern web development Claude Code plugin marketplace providing comprehensive coverage of modern web technologies including Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js, and
Repo: freshtechbro/claudedesignskills
Other skills on claudedesignskills.
- /aframe-webxr
Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR applications, VR experiences, AR experiences, 360-degree media viewers, or immersive web content with minimal
Open skill - /animated-component-libraries
Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring
Open skill - /animejs
Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex choreographed animations. Triggers on tasks involving Anime.js, timeline animations,
Open skill - /babylonjs-engine
Comprehensive skill for Babylon.js 3D web rendering engine. Use this skill when building real-time 3D experiences, browser-based games, interactive visualizations, or immersive web applications. Triggers on tasks involving Babylon.js, 3D scenes, WebGL/WebGPU rendering,
Open skill - /barba-js
Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated route changes, or building websites with smooth navigation. Triggers on tasks involving
Open skill - /blender-web-pipeline
Blender to web export workflows for 3D models and animations. Use this skill when exporting Blender models to glTF for web, optimizing 3D assets for Three.js or Babylon.js, batch processing models with Python scripts, automating Blender workflows, or creating web-ready 3D
Open skill