Using AOS to Animate Elements When Scrolled To
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
npm install @codedbyjordan/aos
yarn add @codedbyjordan/aos
Next we need to initialize AOS
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
<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.
That's it! Thanks for reading. Make sure to share if you found this useful :)