AOS is a simple CSS/JS based animation on scroll library by Michał Sajnóg. Easy to install and highly configurable. This is a basic introduction, there are more detailed instructions on the project's Github Page
1. Install Sources
First step is to include the required JavaScript and Style Sheets from UNPKG.
Add the Style and Script links into the <head> section of your website.
The script link below includes a defer
attribute to stop it interfering with your page load times.
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script defer src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
2. Initialise AOS
Before your site </body> tag include the AOS initialisation script. This must run after the aos.js
script above.
<script> 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 // Settings that can be overridden on per-element basis, by `data-aos-*` attributes: offset: -1000, // offset (in px) from the original trigger point once: true, // whether animation should happen only once - while scrolling down mirror: false, // whether elements should animate out while scrolling past them }); </script>
3. Apply your animations
To add animation ao any element use the attribute data-aos
with the
animation you want to use on the element. There is a massive collection of
predefined animations built-into the library.
For example, a H1
which appears with a fade-right animation:
<h1 data-aos="fade-right">Animate On Scroll Library</h1>
Animations
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
Anchor placements:
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
Easing functions:
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
More Frontend posts
—
Animated SVGs (Scalable Vector Graphics)
Animated SVGs, Scalable Vector Graphics, are increasingly popular choices for adding dynamic elements to websites. Their scalability, lightweight nature, and flexibility make them attractive options for graphic elements and background…
—
Accessibility in ecommerce websites
In the digital age, where online shopping has become an integral part of our lives, ecommerce websites hold the key to business success. Amidst the rush to create visually appealing…
—
AOS: The Animate On Scroll Library
AOS is a simple CSS/JS based animation on scroll library by Michał Sajnóg. Easy to install and highly configurable. This is a basic introduction, there are more detailed instructions on…
—
Simple jQuery Cookie Pop-up
This is a simple EU cookie notification pop-up for legacy websites. All that's required is jQuery. Add the following HTML, jQuery script and apply some CSS - example supplied.…