Add CSS Animations On Scroll With The Simple AOS JS Library

A simple, lightweight, developer-friendly AOS JavaScript library that applies custom CSS animations to page elements as users scroll.

It detects when the elements become visible on scroll and applies the animated CSS classes. This makes it easy to add smooth, modern scroll-based animations that engage users and make your content more dynamic.

How to use it:

1. Download the package and load the main script ‘aos.js’ in the document.

<script src="aos.js"></script>

2. Add the ‘aos-item’ class to the target element and specify the CSS class(es) of scroll-triggered animations using the ‘data-aos’ attribute:

<div class="aos-item" data-aos="animation-class">
  ...
</div>

3. Create your own animations in CSS.

.aos-item {
  ...
}
.aos-item.aos-animation-class {
  ...
}