AOS: A Free Javascript Library To Easily Animate Website Elements on Scroll

AOS: A Free Javascript Library To Easily Animate Website Elements on Scroll

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 aos
npm install aos --save
bower install aos --save

CDN 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

Fancy you stumbling on my piece of the internet. Bonjour!

My name is Anmol and I'm the Blogger-In-Chief of this joint & working as the Chief Technology Officer at Azoora, Inc. I'm putting up my views here trying to help creative solopreneurs, developers & designers build their business using the power of websites, apps & social media, this, is, my jam.

If you're looking to start your own online business with a professional high quality website or mobile app, just get in touch. I'd be more than happy to assist.

SKYPE | FACEBOOK | LINKEDIN | TWITTER | EMAIL

Leave a Comment

Your email address will not be published. Required fields are marked *