👉 To get a better understanding how this actually works, I encourage you to check my post on CSS-tricks.
🚀 Demo
- Different built-in animations
- With anchor setting in use
- With anchor-placement and different easings
- With simple custom animations
Add styles in <head>:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />Add script right before closing </body> tag:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>You can also use:
yarn add aos@nextnpm install --save aos@next
<script>
AOS.init();
// You can also pass an optional settings object
// below listed default settings
AOS.init({
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
duration: 400, // values from 0 to 3000, with step 50ms
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
animatedClassName: 'aos-animate', // class applied on animation
initClassName: 'aos-init', // class applied after initialization
useClassNames: false // if true, will add content of `data-aos` as classes on scroll
});
</script> <div data-aos="fade-in"></div>See full list of all animations, easings and anchor placements
You can overwrite some of the global settings on per-element basis by using following attributes:
data-aos-offsetdata-aos-durationdata-aos-easingdata-aos-delaydata-aos-oncedata-aos-mirror
There are also few settings that can be used only on per-element basis:
data-aos-anchor- element whose offset will be used to trigger animation instead of an actual onedata-aos-anchor-placement(defaulttop-bottom) - defines which position of the element regarding to window should trigger the animation.top-bottommeans that the animation will be triggered once top of the element hits bottom of the screen.
Examples:
<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600"></div>
<div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector"></div>
<div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>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 triggerrefresh(called on DOM changes that are related toaoselements)
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.
AOS dispatches two events on document: aos:in and aos:out whenever any element animates in or out, so that you can do extra stuff in JS:
document.addEventListener('aos:in', ({ detail }) => {
console.log('animated in', detail);
});
document.addEventListener('aos:out', ({ detail }) => {
console.log('animated out', detail);
});You can also tell AOS to trigger custom event on specific element, by setting data-aos-id attribute:
<div data-aos="fade-in" data-aos-id="super-duper"></div>Then you'll be able to listen for two custom events then:
aos:in:super-duperaos:out:super-duper
Use animatedClassName to change default behaviour of AOS, to apply class names placed inside data-aos on scroll.
<div data-aos="fadeInUp"></div>AOS.init({
useClassNames: true,
initClassName: false,
animatedClassName: 'animated',
});The above element will get two classes: animated and fadeInUp. Using different combinations of the three above settings, you should be able to integrate any external CSS animation library.
External libraries however don't care too much about animation state before the actual animation. So if you want those elements to be not visible before scrolling, you might need to add similar styles:
[data-aos] {
visibility: hidden;
}
[data-aos].animated {
visibility: visible;
}*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 :)
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:
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
-
Flip animations:
- flip-up
- flip-down
- flip-left
- flip-right
-
Slide animations:
- slide-up
- slide-down
- slide-left
- slide-right
-
Zoom animations:
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
You can choose one of these timing function to animate elements nicely:
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
✌️ Contributing
If you have any questions, ideas or whatsoever, please check AOS contribution guide and don't hesitate to create new issues.