Animation effects on webpages always look amazing, and it gives a webpage a stunning UX.
If you are a front-end developer, you must have had clients requesting animations on their websites, and there are different libraries to solve this problem such as: Anime JS, scrollReveal JS, popMotion JS, etc.
But here today, you will learn how to setup and start using one of the best libraries for this job which is AOS.js, developed by Michal Sajnóg.
AOS, also known as Animate On Scroll, is a JavaScript library that uses CSS3 animations, to animate elements when they are scrolled into view on a webpage. The name of this library, is exactly what it does to an element.
Installing AOS using package managers.
-For npm:
npm install aos --save
-For Bower:
bower install aos --save
-For Yarn:
yarn add aos
Installing AOS library using a CDN (content delivery network).
Follow the below steps, if you want to setup AOS on your HTML file.
#Step1:
Add the following in the <head> section of your HTML file.
1 | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
#Step2:
Also add the following before the closing </body> tag.
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
#Step3:
Initialize the library by creating a script tag with the calling method as below:
<script> AOS.init(); </script>
Now you have successfully installed and initialized AOS library with it's default settings into your HTML file, and below is what your file should look like.
<!Doctype html> <html> <head> <title>YourPageTitle</title> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> </head> <body> <script> AOS.init(); </script> <!--Your other html codes here--> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> </body> </html>
While initializing AOS, you can also provide settings for how to animate your elements. For that, see some settings Here.
Now the next thing to do is to begin animating your HTML elements right away. And to do this, add the data-aos attribute to the HTML element you want to animate, and then specify the animation-name you want to use on the element.
Example code:
<div data-aos="fade-up" > </div>p
Complete-code:
<!Doctype html> <html> <head> <title>YourPageTitle</title> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> </head> <body> <script> AOS.init(); </script> <div data-aos="fade-up" > </div> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> </body> </html>
If you followed this steps above carefully, your element should fade-up when it is scrolled into view.
But if you still can't do this right, let me know in the comments, maybe either of us made a mistake. Happy Coding!!
0 Comments
Share Your Thoughts...
Emoji