How to Easily Animate Website Elements on Scroll Using the Free AOS Library

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/5K3FvBKVLCo/

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 JavaScript and CSS, you can make elements fade, slide, or even spin as they appear when you scroll down a page.

And you don’t even have to code it all yourself! Thanks to the 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.

We’ll show you how to set up the AOS library right here, plus give you some awesome examples of AOS experiments in action.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates

DOWNLOAD NOW

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 aos@next

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 aos@next

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/aos@2.3.1/dist/aos.css” rel=”stylesheet”>

The JS scripts:

<script src=”https://unpkg.com/aos@2.3.1/dist/aos.js”></script>

Whichever method you used, the last step is to initialize AOS with this code and complete the setup process:

<script>
AOS.init();
</script>

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

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!

Model

See the Pen
Model by Ricardo Pires (@skeezrocco)
on CodePen.

AOS Animate On Scroll Library

See the Pen
AOS Animate On Scroll Library by Oltika (@oltika)
on CodePen.

AOS – animations

See the Pen
AOS – animations by Snik (@michalsnik)
on CodePen.

AOS – anchor

See the Pen
AOS – anchor by Snik (@michalsnik)
on CodePen.

AOS – anchor & anchor-placement

See the Pen
AOS – anchor & anchor-placement by Snik (@michalsnik)
on CodePen.

AOS – custom animations

See the Pen
AOS – custom animations by Snik (@michalsnik)
on CodePen.

Animate on Scroll Examples – Disable Animations

See the Pen
Animate on Scroll Examples – Disable Animaions by SitePoint (@SitePoint)
on CodePen.

AOS JS

See the Pen
AOS JS by manufufu (@WAWI)
on CodePen.

Movie

See the Pen
Movie by Artem (@Artem91)
on CodePen.

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.