AOS
A JavaScript library that fades and slides page elements into view as you scroll.
- Stars
- 28k
- Forks
- 2.6k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 2.6 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
AOS (Animate On Scroll) is a JavaScript and CSS library that animates elements on a web page when they scroll into view. You add a data-aos attribute to an HTML element to pick an animation such as fade-in or fade-up, and AOS handles the timing and triggering. The README describes it as the aos@next version, with v2 noted as the last stable release.
- Make cards or sections fade up as a visitor scrolls down a page
- Trigger animation on a fixed element by pointing data-aos-anchor at another element
- Fire custom JavaScript when elements animate in or out using the aos:in and aos:out events
- Combine AOS with an external CSS animation library such as Animate.css using useClassNames
Great for
- Front-end developers adding simple scroll reveal effects to a marketing or landing page
- Developers who want animation set up with HTML attributes instead of custom scroll code
- Designers prototyping scroll-based motion in a browser
- Projects that already use a plain HTML site or a bundler such as Parcel
Not ideal for
- Projects that need complex, timeline-based animation, since the README only describes built-in animations, custom CSS animations and easings
- Teams that need guaranteed support for older browsers such as IE, because the README says some features need MutationObserver and IE may require manual refresh calls
- Projects that want the README's latest documentation to match an actively maintained release, since the last push shown is from March 2024 and no latest release is listed
How to get it
- 1
Install with a package manager
You'll need: A web page or a JavaScript build process
Install with npm (aos@next, per README)
npm install --save aos@nextInstall with yarn (aos@next, per README)
yarn add aos@next - 2
Run it
- Add the stylesheet from the README to the page head, or import aos/dist/aos.css in your build
- Add the script and call AOS.init() before the closing body tag, or import AOS and call AOS.init() in your code
- Add a data-aos attribute such as data-aos="fade-up" to an element
- Scroll the page and check that the element animates into view
- 3
Get the most out of it
- Use data-aos-anchor to trigger an animation based on another element's position, which the README says is useful for fixed elements
- Listen for aos:in and aos:out events on the document to run your own code when elements animate
- Set global defaults in AOS.init() such as duration, easing, offset and once, then override them per element
- Use useClassNames with an external animation library, following the README's Animate.css recipe
- Call AOS.refresh() or AOS.refreshHard() after layout changes if elements do not trigger correctly
Downloads
Strengths
- Setup is small: include the CSS and JS, call AOS.init(), and add data-aos attributes to elements
- Many options can be set per element with data-aos-* attributes, such as delay, duration, easing and offset
- Widely used, with about 28,000 GitHub stars and an MIT license
Trade-offs
- Delay and duration are limited to values from 0 to 3000 in 50ms steps, according to the README; other values need custom CSS
- The README notes that IE and some older browsers may need manual AOS.refreshHard() calls
- The README is truncated and the metadata shows no releases or topics, so long-term maintenance status is hard to judge from this text
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.