Today I will be teaching you how to animate elements when scrolled to using my own library, AOS. Not to be confused with AOS by Michael Snik. Although that library works, it is no longer being maintained and there are now better ways to go about making a library like this, such as using IntersectionObserver like I did.
So, how do you use it?
Well, first, you need to install the package. You can do this by either using the CDN or using NPM/Yarn
CDN
<script src="https://cdn.jsdelivr.net/npm/@codedbyjordan/aos"></script>
NPM
npm install @codedbyjordan/aos
Yarn
yarn add @codedbyjordan/aos
Next we need to initialize AOS
aos.init();
This function takes all the elements with the data-aos-animate attribute and calls aosObserve, which creates an IntersectionObserver for them. You can also call aosObserve() on its own.
Now, to make an element animate, we need to give an element the data-aos-animate attribute specifying the name of the animation we want. AOS uses Animate.css, so any animations from there will work, but you can also use your own animations my making a CSS keyframe and specifying the name inside of data-aos-animate.
<h1 data-aos-animate="fadeIn">hello, world!</h1>
If no animation is specified, AOS will default to using fadeIn
This works, but what if we want more customization? AOS supports other attributes such as data-aos-duration to control how long we want the animation to be, and data-aos-threshold to specify how much of the element we want to be in view before triggering the animation.
Make sure to check out the GitHub repo along with my portfolio if you want an example of a site using AOS
That's it! Thanks for reading. Make sure to share if you found this useful :)