Add CSS Animations On Scroll With The Simple AOS JS Library

Category: Animation , Javascript | January 5, 2024
Author:Pawanhirumina
Views Total:164 views
Official Page:Go to website
Last Update:January 5, 2024
License:MIT

Preview:

Add CSS Animations On Scroll With The Simple AOS JS Library

Description:

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 {
  ...
}

You Might Be Interested In:


Leave a Reply