skills.rest
sixscripts-ai
sixscripts-aiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

scroll-reveal-libraries

Implement scroll-triggered reveal animations using the AOS library with data attributes.

Updated Aug 12, 2026
Search Tags:#landing page#frontend#react#css animations#scroll animations#aos#scroll reveal
One-click install
npx skills add https://github.com/sixscripts-ai/agent-arena-voice --skill scroll-reveal-libraries-sixscripts-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-reveal-libraries
Source: https://github.com/sixscripts-ai/agent-arena-voice/tree/main/.claude/plugins/claudedesignskills/plugins/bundles/animation-components/skills/scroll-reveal-libraries
Command: npx skills add https://github.com/sixscripts-ai/agent-arena-voice --skill scroll-reveal-libraries-sixscripts-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires aos, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Adding scroll-triggered animations to websites typically requires complex JavaScript animation libraries and manual scroll event handling. This Skill provides a lightweight, data-attribute-driven approach using AOS (Animate On Scroll) to add fade, slide, zoom, and flip reveal effects without writing animation logic from scratch. ## Core Features & Use Cases - Data Attribute API: Apply 28 built-in animations (fade, slide, zoom, flip variants) directly in HTML using data-aos attributes with per-element overrides for duration, delay, offset, and easing. - Framework Integration: Ready-made patterns for React, Next.js, and Vue including initialization in lifecycle hooks, route-change refreshes, and dynamic content handling via AOS.refresh(). - Generator Scripts: Use aos_generator.py to produce complete HTML templates (hero, features, landing, gallery, timeline) and config_builder.py to generate AOS.init() configurations from presets like marketing, blog, or performance. - Use Case: Building a marketing landing page where feature cards fade up in a staggered sequence, testimonials zoom in, and a CTA button appears with a delay as the user scrolls. ## Quick Start Add scroll-triggered fade-up animations to my landing page feature cards using AOS with staggered delays.

Frequently Asked Questions about scroll-reveal-libraries

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add scroll-triggered animations to my website with AOS?▼

Include the AOS CSS and JavaScript files via CDN or npm, call AOS.init() with your configuration, then add data-aos attributes like fade-up or zoom-in to HTML elements. Animations trigger automatically when elements enter the viewport.

AOS vs GSAP ScrollTrigger: which should I use for scroll animations?▼

AOS suits simple fade, slide, and zoom reveals with minimal setup at around 13KB. GSAP ScrollTrigger is better for complex timelines, precise scroll-synced animations, and advanced easing, but requires more JavaScript and a steeper learning curve.

Does AOS work with React and Next.js?▼

Yes, AOS works with React and Next.js. Initialize it inside useEffect on mount, import the CSS file, and call AOS.refresh() on route changes or after dynamic content updates so new elements are detected.

Why are my AOS animations not working after adding elements dynamically?▼

AOS does not automatically detect elements added to the DOM after initialization. Call AOS.refresh() to recalculate positions or AOS.refreshHard() to fully reinitialize after inserting new elements.

How do I disable AOS animations on mobile devices?▼

Set the disable option to 'mobile', 'phone', or 'tablet' in AOS.init(), or pass a custom function such as one checking window.innerWidth < 768. You can also respect prefers-reduced-motion using window.matchMedia.

When should I not use AOS for animations?▼

Avoid AOS for complex animation timelines, physics-based motion, or precise scroll-synced effects. Use GSAP ScrollTrigger for orchestrated sequences, or Framer Motion and React Spring for physics-based React animations.

Related Skills

Explore More Software Engineering Skills→
alirezarezvanialirezarezvani
25.3k

epic-design

Build cinematic 2.5D scroll-driven websites with parallax depth layers, GSAP animations, and clip-path reveals.

Community
Advanced
fanguyunfanguyun

gsap-scrolltrigger

Create scroll-linked animations with GSAP ScrollTrigger, including pinning and scrubbing.

Community
Advanced
hii-saikrishnahii-saikrishna

locomotive-scroll

Implement smooth scrolling, parallax effects, and scroll-driven animations with JavaScript and GSAP.

Community
Intermediate
VXerysVXerys

migrate-scroll-to-gsap

Convert scroll-driven animations from Framer Motion to GSAP ScrollTrigger in React/Next.js components.

Community
Intermediate