skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

scroll-reveal-libraries

Implement scroll-triggered reveal animations using the AOS library across web frameworks.

Updated Jun 30, 2026
Search Tags:#React#landing page#css animations#scroll animations#aos#scroll-triggered#reveal effects
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill scroll-reveal-libraries-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-reveal-libraries
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/scroll-reveal-libraries
Command: npx skills add https://github.com/ayofemiade/cleva --skill scroll-reveal-libraries-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Adding scroll-triggered animations to marketing pages, landing pages, and content-heavy sites typically requires complex animation libraries or custom JavaScript. This Skill provides a lightweight, data-attribute-driven approach using AOS (Animate On Scroll) for simple fade, slide, zoom, and flip effects without heavy animation orchestration. ## Core Features & Use Cases - Data Attribute API: Apply 28 built-in animations (fades, slides, zooms, flips) 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.js including route-change refresh handling and dynamic content updates via AOS.refresh(). - Generator Scripts: Use aos_generator.py to produce HTML boilerplate templates (hero, features, landing, gallery, timeline) and config_builder.py to build AOS.init() configurations from presets. - Use Case: Building a landing page with a staggered hero section, feature card grid, and testimonials that animate as the user scrolls, with mobile and reduced-motion accessibility handling. ## Quick Start Add scroll-triggered fade and slide animations to my landing page sections using AOS with a staggered delay pattern.

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?▼

Install AOS via npm or CDN, import its CSS, 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 physics-based motion, but has a steeper learning curve and larger footprint.

Does AOS work with React and Next.js?▼

Yes, AOS works with React and Next.js. Initialize it inside useEffect on mount, and call AOS.refresh() on route changes or after dynamic content updates so newly rendered elements are detected and animated.

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?▼

Pass disable: 'mobile' to AOS.init(), or provide a custom function such as checking window.innerWidth < 768. You can also respect accessibility by disabling when the prefers-reduced-motion media query matches.

When should I not use AOS for animations?▼

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

Related Skills

Explore More Software Engineering Skills→
sixscripts-aisixscripts-ai

scroll-reveal-libraries

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

Community
Intermediate
fanguyunfanguyun

gsap-scrolltrigger

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

Community
Advanced
fyunusafyunusa

locomotive-scroll

Implement smooth scrolling, parallax effects, and viewport detection with Locomotive Scroll.

Community
Intermediate
VXerysVXerys

migrate-scroll-to-gsap

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

Community
Intermediate