Discover how to use AOS.js to create scroll-based animations. Everything you need to implement, customize, and extend animation capabilities.
npm install aos@latestInclude in your JavaScript project via NPM with tree-shaking support.
<script src="https://cdn.jsdelivr.net/npm/aos@latest/dist/aos.js"></script>Use the official CDN for quick integration without build tools.
<div data-aos="fade-up">
Your animated content
</div>AOS.init({
duration: 1000,
once: true
});duration - Animation duration in milliseconds
offset - Distance from viewport before animation triggers
easing - Animation easing method
destroy() - Removes AOS animations from all elements
refresh() - Recalculates positions (use after DOM changes)
70+ built-in animations using Animate.css framework. Combine multiple animations with ease.
View full list in Animations Reference
Default: 800ms – Controls animation duration. Can be set per element.
AOS.init({ duration: 1200 });
Default: 120px – How many pixels from the viewport to trigger animation.
AOS.init({ offset: 100 });
Default: false – Run the animation only once when element is visible.
AOS.init({ once: true });
Default: 'ease-out-back' – Animation easing function.
AOS.init({ easing: 'ease-in-out-cubic' });
Combine multiple AOS animations with timing delays for complex entry sequences.
<div class="aos-sequence">
<div data-aos="fade-up" data-aos-delay="100">First</div>
<div data-aos="zoom-in" data-aos-delay="300">Second</div>
<div data-aos="slide-right" data-aos-delay="500">Third</div>
</div>
document.querySelectorAll('.aos-sequence').forEach(container => {
AOS.init({
parent: container,
delay: 100,
duration: 1000
});
});
Use device specific animations by setting different options for various breakpoints.
AOS.init({
duration: function () {
return window.innerWidth < 768 ? 500 : 1000;
}()
});