We’ll show you how to set up the AOS library right here, plus give you some awesome examples of AOS experiments in action.
Setting Up AOS
Installing AOS to your site is a simple process if you’re using a CDN or package manager, which host all the files for you and install them properly. If you don’t want to do that, you’ll need to download the files and set them up yourself.
With a package manager, all you need to do is input a code into the command line/terminal of the server you installed it on. npm is one popular solution, and it comes automatically bundled with Node.js too. Just use this command:
npm install --save [email protected]
There’s also Bower, which requires npm. While it’s a deprecated tool, it’s still maintained and is used by many. If you have it installed, launch this script:
bower install aos --save
Finally, there’s Yarn, a popular alternative to Bower. This is the code you’ll need:
yarn add [email protected]
If you prefer to use a CDN, these scripts will install the files and stylesheets you’ll need to get started. Make sure to include both of them or it won’t work properly.
The CSS scripts:
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
The JS scripts:
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
Whichever method you used, the last step is to initialize AOS with this code and complete the setup process:
Then it’s just a matter of creating the animations! Check out this table of animation controls, and these predefined animations you can use. It’s up to you to craft the perfect effects that fit your unique website. If you get stuck, try this in-depth tutorial written by the developer. It has plenty of helpful examples.
AOS Experiments and Examples
Scroll Effects Made Easy
If you’re looking for a library that makes elegant scroll effects a breeze to implement, definitely consider trying AOS. It’s simple to install and even easier to learn, so you can have on-scroll animations up and running in a snap.
This post may contain affiliate links. See our disclosure about affiliate links here.