AOS
~5kb gzippedDeclarative reveal-on-scroll animations via HTML data attributes.
See It in Action
Each demo scrolls naturally in the iframe. Decorate elements with data-aos attributes, call AOS.init() once -- scroll up and down to see them replay.
Six cards fade up in staggered sequence as you scroll past the hero. data-aos-delay adds the per-card offset -- zero custom JS.
What is AOS?
Maintenance note: AOS is stable and feature-complete. The last commit landed in March 2024 and the author stopped active development. It still works reliably on modern browsers and powers thousands of live sites, but if you need ongoing updates or a more powerful scroll-animation engine, reach for GSAP ScrollTrigger instead.
AOS (Animate On Scroll) is a tiny library that reveals elements with prebuilt animations as they enter the viewport. You add data-aos="fade-up" to any element, call AOS.init() once, and the library handles the rest -- watching scroll position via IntersectionObserver and toggling CSS classes that drive the effect.
The appeal is speed to result. 20+ effects, per-element duration / delay / offset / easing via data attributes, and no JS per element. For small marketing pages and content-heavy sites, it remains one of the fastest ways to ship scroll reveal animations.
When to Use AOS
How AOS Compares
GSAP ScrollTrigger is the actively-maintained, professional-grade choice. AOS is simpler and declarative but dormant. If you need ongoing updates, fine-grained control, or scrubbing animations tied to scroll position, use ScrollTrigger.
Lenis and AOS solve different problems -- they complement each other. Lenis smooths the scroll itself; AOS triggers animations when elements enter the viewport. You can use both together on the same page.
You can roll your own with ~20 lines of JS and CSS -- add a class when an element enters the viewport, animate that class with @keyframes. AOS is essentially a pre-made version of this pattern with 20 effects and config API.
Get Started with AOS
npm install aosyarn add aos<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script><!-- In your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css">
<!-- Near the end of <body> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
<script>
// One call at page load -- AOS watches scroll and toggles classes
AOS.init({
duration: 700, // ms
offset: 80, // fire 80px before element enters viewport
easing: "ease-out-cubic",
once: true // set false to replay when scrolling back
});
</script>
<!-- Then decorate any element: -->
<div data-aos="fade-up">I fade in as I scroll into view</div>
<div data-aos="fade-up" data-aos-delay="100">Me too -- 100ms later (stagger)</div>
<div data-aos="zoom-in-right" data-aos-duration="1000">Zoom in from the right, slowly</div>