AOS (Animate On Scroll) is a small library that allows you to animate elements as you scroll down, and up. It is highly customizable and easy to use, making it a popular choice for adding scroll animations to web projects.
Basic Animation
This feature allows you to add basic animations to elements as they come into view while scrolling. The 'data-aos' attribute specifies the type of animation.
<script>
AOS.init();
</script>
<div data-aos="fade-up">
<p>This element will fade up as you scroll down.</p>
</div>Custom Animation Duration
You can customize the duration of the animation using the 'data-aos-duration' attribute. This example sets the animation duration to 2000 milliseconds (2 seconds).
<div data-aos="fade-up" data-aos-duration="2000">
<p>This element will fade up over 2 seconds as you scroll down.</p>
</div>Custom Animation Delay
You can add a delay to the start of the animation using the 'data-aos-delay' attribute. This example sets a delay of 500 milliseconds.
<div data-aos="fade-up" data-aos-delay="500">
<p>This element will start fading up 500 milliseconds after it comes into view.</p>
</div>Easing Function
You can specify an easing function for the animation using the 'data-aos-easing' attribute. This example uses the 'ease-in-out' easing function.
<div data-aos="fade-up" data-aos-easing="ease-in-out">
<p>This element will fade up with an ease-in-out easing function.</p>
</div>Anchor Placement
You can control when the animation should start based on the position of the element in the viewport using the 'data-aos-anchor-placement' attribute. This example starts the animation when the top of the element is at the center of the viewport.
<div data-aos="fade-up" data-aos-anchor-placement="top-center">
<p>This element will fade up when the top of the element is at the center of the viewport.</p>
</div>ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It offers more advanced customization options compared to AOS, such as finer control over animation sequences and more complex animations.
WOW.js is a library that reveals animations when you scroll. It is similar to AOS but focuses more on integrating with animate.css for predefined animations. It is less customizable than AOS but easier to set up if you are using animate.css.
Sal.js (Scroll Animation Library) is a performance-focused library for animating elements on scroll. It is lightweight and offers a similar API to AOS, but with a focus on performance and simplicity.
Small library to animate elements on your page as you scroll.
You may say it's like WOWJS, yeah - you're right, effect is similar to WOWJS, but I had a different idea how to make such a plugin, so here it is. CSS3 driven scroll animation library.
AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it's previous state and are ready to animate again if you scroll down.
👉 To get a better understanding how this actually works, I encourage you to check my post on CSS-tricks.
From version 2.0.0 attributes aos are no longer supported, always use data-aos.
Using bower
bower install aos --save
Using npm
npm install aos --save
Direct download -> click here
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
<script src="bower_components/aos/dist/aos.js"></script>
AOS from version 1.2.0 is available as UMD module, so you can use it as AMD, Global, Node or ES6 module.
<script>
AOS.init();
</script>
All you have to do is to add data-aos attribute to html element, like so:
<div data-aos="animation_name">
Script will trigger "animation_name" animation on this element, if you scroll to it.
Down below is a list of all available animations for now :)
These settings can be set both on certain elements, or as default while initializing script (in options object without data- part).
| Attribute | Description | Example value | Default value |
|---|---|---|---|
data-aos-offset | Change offset to trigger animations sooner or later (px) | 200 | 120 |
data-aos-duration | *Duration of animation (ms) | 600 | 400 |
data-aos-easing | Choose timing function to ease elements in different ways | ease-in-sine | ease |
data-aos-delay | Delay animation (ms) | 300 | 0 |
data-aos-anchor | Anchor element, whose offset will be counted to trigger animation instead of actual elements offset | #selector | null |
data-aos-anchor-placement | Anchor placement - which one position of element on the screen should trigger animation | top-center | top-bottom |
data-aos-once | Choose wheter animation should fire once, or every time you scroll up/down to element | true | false |
*Duration accept values from 50 to 3000, with step 50ms, it's because duration of animation is handled by css, and to not make css longer than it is already I created implementations only in this range. I think this should be good for almost all cases.
If not, you may write simple CSS on your page that will add another duration option value available, for example:
body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
transition-duration: 4000ms;
}
This code will add 4000ms duration available for you to set on AOS elements, or to set as global duration while initializing AOS script.
Notice that double [data-aos][data-aos] - it's not a mistake, it is a trick, to make individual settings more important than global, without need to write ugly "!important" there :)
data-aos-anchor-placement - You can set different placement option on each element, the principle is pretty simple, each anchor-placement option contains two words i.e. top-center. This means that animation will be triggered when top of element will reach center of the window.
bottom-top means that animation will be triggered when bottom of an element reach top of the window, and so on.
Down below you can find list of all anchor-placement options.
<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">
<div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector">
<div data-aos="fade-up" data-aos-anchor-placement="top-center">
AOS object is exposed as a global variable, for now there are three methods available:
init - initialize AOSrefresh - recalculate all offsets and positions of elements (called on window resize)refreshHard - reinit array with AOS elements and trigger refresh (called on DOM changes that are related to aos elements)Example execution:
AOS.refresh();
By default AOS is watching for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM it calls refreshHard automatically. In browsers that don't support MutationObserver like IE you might need to call AOS.refreshHard() by yourself.
refresh method is called on window resize and so on, as it doesn't require to build new store with AOS elements and should be as light as possible.
If you don't want to change setting for each element separately, you can change it globally.
To do this, pass options object to init() function, like so:
<script>
AOS.init({
offset: 200,
duration: 600,
easing: 'ease-in-sine',
delay: 100,
});
</script>
These settings can be set only in options object while initializing AOS.
| Setting | Description | Example value | Default value |
|---|---|---|---|
disable | Condition when AOS should be disabled | mobile | false |
startEvent | Name of event, on which AOS should be initialized | exampleEvent | DOMContentLoaded |
If you want to disable AOS on certain device or under any statement you can set disable option. Like so:
<script>
AOS.init({
disable: 'mobile'
});
</script>
There are several options that you can use to fit AOS perfectly into your project, you can pass one of three device types:
mobile (phones and tablets), phone or tablet. This will disable AOS on those certains devices. But if you want make your own condition, simple type your statement instead of device type name:
disable: window.innerWidth < 1024
There is also posibility to pass a function, which should at the end return true or false:
disable: function () {
var maxWidth = 1024;
return window.innerWidth < maxWidth;
}
If you don't want to initialize AOS on DOMContentLoaded event, you can pass your own event name and trigger it whenever you want. AOS is listening for this event on document element.
<script>
AOS.init({
startEvent: 'someCoolEvent'
});
</script>
Important note: If you set startEvent: 'load' it will add event listener on window instead of document.
There are serveral predefined animations you can use already:
Fade animations:
Flip animations:
Slide animations:
Zoom animations:
You can choose one of these timing function to animate elements nicely:
If you have any questions, ideas or whatsoever, please check AOS contribution guide and don't hesitate to create new issues.
FAQs
Animate on scroll library
We found that aos demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Elastic’s return to open source with the AGPL license has been met with skepticism, as many developers see it as a strategic move rather than a genuine effort to restore user trust and freedoms.
Security News
A new "revival hijack" supply chain attack targets deleted Python packages, with an estimated 22K packages at risk. Socket can detect and block hijacked packages that have added malicious code.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.