How do I add custom animations in AOS?

Define a CSS class for your animation and use it in the data-aos attribute, then ensure AOS is initialized with useClassNames set appropriately. The README provides recipes for custom animations using CSS transitions and media queries.

AOS vs ScrollMagic: which is better for scroll animations?

AOS is simpler and more declarative, ideal for basic scroll-triggered animations with minimal setup via HTML attributes. ScrollMagic offers more advanced control with timeline-based sequences but requires more JavaScript and has a steeper learning curve.

Does AOS work with React or Vue?

Yes, AOS can be used with React or Vue by importing it and initializing in lifecycle methods, but you may need to handle refreshes manually when components update. Some developers prefer framework-specific libraries for tighter integration.

How to disable AOS animations on mobile devices?

Use the global disable setting in AOS.init(), such as setting it to 'mobile' or a function, or apply per-element CSS media queries. The README mentions options to disable animations on specific devices for responsiveness.

Can AOS be used for parallax scrolling effects?

AOS is not designed for parallax effects, which typically involve background movement at different speeds. It focuses on element entrance/exit animations; for parallax, consider dedicated libraries like Rellax or pure CSS solutions.

Why are my AOS animations not firing with lazy-loaded content?

Lazy-loaded content may not be detected by AOS automatically. You need to call AOS.refresh() or AOS.refreshHard() after the content loads to recalculate offsets, as highlighted in the API section for DOM changes.

AOS — Scroll Animation Library

What is AOS?

AOS (Animate On Scroll) is a lightweight JavaScript library that detects page scrolling and triggers smooth CSS animations on elements as they enter or leave the viewport. It provides an easy way to add engaging scroll-based animations to websites without heavy dependencies or complex configurations. The library focuses on simplicity and performance, leveraging CSS for hardware-accelerated transitions while keeping the JavaScript footprint minimal.

Target Audience

Web developers and designers looking to add scroll-triggered animations to websites with minimal setup, particularly those working on marketing sites, portfolios, or content-heavy pages where visual engagement is a priority.

Value Proposition

Developers choose AOS for its straightforward, declarative HTML attribute-based setup, extensive library of built-in animations, and fine-grained control over animation timing and behavior without requiring deep JavaScript knowledge. Its small size, performance focus, and ability to integrate with external CSS animation libraries like Animate.css offer flexibility without bloat.

Animate on scroll library

Use Cases

Best For

Adding entrance animations to sections or elements as users scroll down a webpage.
Creating interactive storytelling or presentation websites where content reveals on scroll.
Enhancing marketing or landing pages with engaging, performance-optimized animations.
Building portfolios or personal websites where visual flair on scroll improves user experience.
Implementing scroll-triggered animations without relying on heavy frameworks or complex JavaScript.
Integrating with external CSS animation libraries like Animate.css for expanded animation options.

Not Ideal For

Projects requiring animations triggered by user interactions beyond scrolling (e.g., clicks, hovers, or drag-and-drop)
Server-side rendered applications aiming for zero client-side JavaScript to maximize performance or accessibility
Single-page applications with highly dynamic content that mounts/unmounts frequently without full page reloads
Complex animation sequences needing precise timeline control or synchronization across multiple elements

Pros & Cons

Pros

Extensive Built-in Animations

Offers a wide range of predefined animations like fades, flips, slides, and zooms, making it easy to add effects without writing custom CSS from scratch, as listed in the animations section.

Granular Control via Attributes

Allows fine-tuning per element with HTML data attributes for offset, delay, duration, easing, and anchor placement, enabling precise adjustments without JavaScript coding, demonstrated in the usage examples.

Lightweight and Performant

Focuses on simplicity with minimal JavaScript, leveraging CSS for hardware-accelerated transitions to ensure smooth animations while keeping the library small and fast, as emphasized in the philosophy.

Event-Driven Interactivity

Dispatches custom JavaScript events (aos:in, aos:out) for advanced integrations, allowing developers to trigger other actions based on animation states, as shown in the JS Events section.

Extensible and Integrable

Supports custom animations, easing functions, and seamless integration with external CSS libraries like Animate.css, providing flexibility for advanced use cases, as detailed in the recipes.

Cons

Limited Animation Timing Granularity

Duration and delay values are restricted to steps of 50ms from 50 to 3000, which may not accommodate all timing needs without custom CSS overrides, as noted in the caveats.

Manual Refresh for Dynamic Content

In applications with asynchronous DOM changes, AOS requires explicit calls to refresh() or refreshHard() to detect new elements, adding complexity for dynamic or single-page apps.

CSS Dependency for Customizations

While it uses CSS for animations, creating custom effects or integrating with other libraries often requires additional CSS setup, which might be a barrier for developers less familiar with CSS.

Scroll-Only Trigger Limitation

The library is designed solely for scroll-based animations, so it cannot natively handle other triggers like clicks or hovers without extra JavaScript workarounds.

What is AOS?

Target Audience

Value Proposition

Use Cases

Best For

Adding entrance animations to sections or elements as users scroll down a webpage.
Creating interactive storytelling or presentation websites where content reveals on scroll.
Enhancing marketing or landing pages with engaging, performance-optimized animations.
Building portfolios or personal websites where visual flair on scroll improves user experience.
Implementing scroll-triggered animations without relying on heavy frameworks or complex JavaScript.
Integrating with external CSS animation libraries like Animate.css for expanded animation options.

Not Ideal For

Projects requiring animations triggered by user interactions beyond scrolling (e.g., clicks, hovers, or drag-and-drop)
Server-side rendered applications aiming for zero client-side JavaScript to maximize performance or accessibility
Single-page applications with highly dynamic content that mounts/unmounts frequently without full page reloads
Complex animation sequences needing precise timeline control or synchronization across multiple elements

Pros & Cons

Pros

Extensive Built-in Animations

Offers a wide range of predefined animations like fades, flips, slides, and zooms, making it easy to add effects without writing custom CSS from scratch, as listed in the animations section.

Granular Control via Attributes

Lightweight and Performant

Event-Driven Interactivity

Dispatches custom JavaScript events (aos:in, aos:out) for advanced integrations, allowing developers to trigger other actions based on animation states, as shown in the JS Events section.

Extensible and Integrable

Supports custom animations, easing functions, and seamless integration with external CSS libraries like Animate.css, providing flexibility for advanced use cases, as detailed in the recipes.

Cons

Limited Animation Timing Granularity

Duration and delay values are restricted to steps of 50ms from 50 to 3000, which may not accommodate all timing needs without custom CSS overrides, as noted in the caveats.

Manual Refresh for Dynamic Content

In applications with asynchronous DOM changes, AOS requires explicit calls to refresh() or refreshHard() to detect new elements, adding complexity for dynamic or single-page apps.

CSS Dependency for Customizations

While it uses CSS for animations, creating custom effects or integrating with other libraries often requires additional CSS setup, which might be a barrier for developers less familiar with CSS.

Scroll-Only Trigger Limitation

The library is designed solely for scroll-based animations, so it cannot natively handle other triggers like clicks or hovers without extra JavaScript workarounds.

AOS

What is AOS?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

AOS

What is AOS?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?