2018
Project Started. Initial concept and design phase.
Animate On Scroll Library
Scroll down to see the magic ✨
1. Initialize AOS:
AOS.init();
// You can also pass an optional settings object
// below listed default settings
AOS.init({
// Global settings:
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
Element fades in while moving upwards.
<div data-aos="fade-up"></div>
Element fades in while moving downwards.
<div data-aos="fade-down"></div>
Element fades in while moving to the right.
<div data-aos="fade-right"></div>
Element fades in while moving to the left.
<div data-aos="fade-left"></div>
Diagonal movement towards top-right.
<div data-aos="fade-up-right"></div>
Diagonal movement towards top-left.
<div data-aos="fade-up-left"></div>
Diagonal movement towards bottom-right.
<div data-aos="fade-down-right"></div>
Diagonal movement towards bottom-left.
<div data-aos="fade-down-left"></div>
Element zooms in from smaller size.
<div data-aos="zoom-in"></div>
Element zooms in while moving upwards.
<div data-aos="zoom-in-up"></div>
Element zooms in while moving downwards.
<div data-aos="zoom-in-down"></div>
Element zooms out from larger size.
<div data-aos="zoom-out"></div>
Element zooms out while moving left.
<div data-aos="zoom-out-left"></div>
Element zooms out while moving right.
<div data-aos="zoom-out-right"></div>
Element flips along the Y axis (left).
<div data-aos="flip-left"></div>
Element flips along the Y axis (right).
<div data-aos="flip-right"></div>
Element flips along the X axis (up).
<div data-aos="flip-up"></div>
Element flips along the X axis (down).
<div data-aos="flip-down"></div>
Project Started. Initial concept and design phase.
First Prototype. Testing core functionalities and user feedback.
Beta Launch. Opened to a limited number of users for stress testing.
Official Release. Available to the public with full feature set.
Major Update. Introduced new features and performance improvements.
Triggers when top of element hits bottom of viewport.
data-aos-anchor-placement="top-bottom"
Triggers when center of element hits bottom of viewport.
data-aos-anchor-placement="center-bottom"
Triggers when bottom of element hits bottom of viewport.
data-aos-anchor-placement="bottom-bottom"
Triggers when top of element hits center of viewport.
data-aos-anchor-placement="top-center"
Triggers when center of element hits center of viewport.
data-aos-anchor-placement="center-center"
Triggers when bottom of element hits center of viewport.
data-aos-anchor-placement="bottom-center"
Different offsets trigger animations at different scroll positions.
Triggers earlier (before element reaches trigger point).
data-aos-offset="-200"
Standard trigger point.
data-aos-offset="0"
Triggers later (element must be 300px into view).
data-aos-offset="300"
Scroll up and down. I will animate every time.
data-aos-once="false"
Scroll up and down. I will only animate once.
data-aos-once="true"
AOS observes the DOM for new elements.
I was here from the start.