With free AOS Library, beautifying your website is as simple as adding a script. Just use a CDN or a package manager to install the JavaScript and CSS files, and insert a few lines of code. Then crafting animations will be a breeze.
On-scroll animations can add quite the elegant effect to your website. A little animated polish can go a long way towards making your site look well-rounded and complete. With this JS library, you can make elements fade, slide, or even spin as they appear when you scroll down a page.
Now, We’ll show you how to set it up right here, and we’ve also provided some nice examples of AOS experiments in action.
Install using YARN, NPM, BOWER
yarn add aosnpm install aos --savebower install aos --saveCDN Sources
CSS
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">JS
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>Initialize AOS
<script>
AOS.init();
</script>AOS Experiments and Examples
The best way to learn a new library is by seeing the code in action, and that’s why sites like CodePen are so valuable. Check out the snippets below, and you’ll be able to see working AOS JavaScript alongside the output. You can even tweak the code in real time. Then use the knowledge you gain to build your own awesome animations!
01. Model
02. AOS: Animate On Scroll Library
03. AOS: Animations
04. AOS: Anchor
05. AOS: Anchor & Anchor-Placement
06. AOS: Custom Animations
07. AOS Examples: Disable Animations
08. AOS JS
09. Movie
Scroll Effects Made Easy
Thanks to JavaScript libraries like AOS, creating websites with beautiful animations isn’t such a huge deal. It might take a bit to learn the ins and outs of a library, especially if you’re a beginner, but it makes the whole process a lot more accessible to new web developers. And it means that you don’t have to create it yourself from scratch.
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.
Official Plugin Page: GitHub
Demo: Link
Download: Link
