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 rev

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) : NPM/Yarn (Recommended) : Basic Usage Apply animations using the data aos attribute: Configuration Options Global Configuration : Per Element Overrides : Common Patterns 1. Landing Page Hero Section 2. Feature Cards Grid 3. Alternating Content Sections 4. Scroll Triggered Testimonials 5. Custom Anchor Triggers Trigger animations based on a different element's scroll position: 6. Sequential Animation Chain 7. Image Gallery with Zoom Effects Integration Patterns React Integration Basic Setup : Refreshing on Route Changes : Dynamic Content Updates : Component Wrapper Pattern : Vue.js Integration Next.js Integration Performance Optimization 1. Disable on Mobile Devices 2. Use Once for Better Performance 3. Optimize Throttle and Debounce 4. Disable Mutation Observer for Static Content 5. Reduce Animation Complexity 6. Use RequestIdleCallback for Initialization Common Pitfalls 1. Forgetting to Refresh After DOM Changes Problem : New elements don't animate after being added dynamically. Solution : Call AOS.refresh() or AOS.refreshHard() : 2. Animations Not Working in React Problem : AOS doesn't detect elements on first render or route changes. Solution : Initialize in useEffect and refresh on route/content changes: 3. Scroll Performance Issues Problem : Page scrolling feels janky with many animated elements. Solution : Reduce animated elements and use once: true : 4. CSS Conflicts Problem : Custom CSS interferes with AOS animations. Solution : Use more specific selectors and avoid !important : 5. Anchor Placement Confusion Problem : Animations trigger at unexpected scroll positions. Solution : Understand anchor placement options: 6. Duration/Delay Limits Problem : Values above 3000ms don't work. Solution : Add custom CSS for extended durations: Built in Animations Fade Animations fade in Simple fade in fade up Fade in from bottom fade down Fade in from top fade left Fade in from right fade right Fade in from left fade up right Diagonal fade fade up left Diagonal fade fade down right Diagonal fade fade down left Diagonal fade Slide Animations slide up Slide from bottom slide down Slide from top slide left Slide from right slide right Slide from left Zoom Animations zoom in Zoom in zoom in up Zoom in from bottom zoom in down Zoom in from top zoom in left Zoom in from right zoom in right Zoom in from left zoom out Zoom out zoom out up Zoom out to top zoom out down Zoom out to bottom zoom out left Zoom out to left zoom out right Zoom out to right Flip Animations flip up Flip from bottom flip down Flip from top flip left Flip from right flip right Flip from left Custom Animations Create custom animations with CSS: Comparison with Alternatives AOS vs GSAP ScrollTrigger Feature AOS GSAP ScrollTrigger Complexity Simple, data attribute based Advanced, JavaScript API Use Case Simple reveals Complex timelines File Size ~13KB ~27KB (GSAP) + ScrollTrigger Performance CSS driven JavaScript driven Learning Curve Minutes Hours Customization Limited Extensive Best For Marketing pages Interactive experiences Use AOS when : Simple fade/slide/zoom effects Quick implementation needed Minimal JavaScript preferred Basic scroll reveals sufficient Use GSAP ScrollTrigger when : Complex animation sequences Precise scroll synced animations Timeline orchestration needed Advanced easing/physics required Resources Official Documentation AOS : https://michalsnik.github.io/aos/ GitHub : https://github.com/michalsnik/aos Key Scripts scripts/aos generator.py Generate AOS HTML boilerplate scripts/config builder.py Build AOS configuration References references/aos api.md Complete AOS API reference references/animation catalog.md All built in animations with demos references/integration patterns.md Framework integration guides Starter Assets assets/starter aos/ Complete AOS starter template assets/examples/ Production ready patterns Related Skills gsap scrolltrigger : For complex scroll driven animations motion framer : For React specific animations with physics locomotive scroll : For smooth scrolling with parallax animated component libraries : For pre built animated React components

scroll-reveal-libraries