So you want to know how to trigger animations as you scroll up and down a page, without having to code a bunch of different keyframes yourself? Behold, the Animate On Scroll library is just what you are looking for!

The above codepen shows a quick demo of the scroll animation effects.

So how do you use it?

step 1: Head to this website. The AOS library was developed by Michal Sajnóg and he also created this handy website that demonstrates all of the different kinds of animations you can provide to your HTML elements.

step 2: If you scroll to the bottom of his website you can find CDN sources. Copy and paste these into your HTML file.

Add styles in <head> :

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Add script right before closing <body> tag:

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

step 3: To initialize Animate on Scroll insert the following code inside of your script tags:

<script>

AOS.init();

</script>

step 4: Provide settings to configure how you want your elements to be animated. Michal has listed some of the different settings in GitHub. I have pasted the exact settings below:

// below listed default settings

AOS.init({

// Global settings:

disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function

startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on

initClassName: 'aos-init', // class applied after initialization

animatedClassName: 'aos-animate', // class applied on animation

useClassNames: false, // if true, will add content of `data-aos` as classes on scroll

disableMutationObserver: false, // disables automatic mutations' detections (advanced)

debounceDelay: 50, // the delay on debounce used while resizing window (advanced)

throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)





// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:

offset: 120, // offset (in px) from the original trigger point

delay: 0, // values from 0 to 3000, with step 50ms

duration: 400, // values from 0 to 3000, with step 50ms

easing: 'ease', // default easing for AOS animations

once: false, // whether animation should happen only once - while scrolling down

mirror: false, // whether elements should animate out while scrolling past them

anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation



});

His GitHub link also lists all of the different easing functions, anchor placements etc. you can provide.

step 5: Now all you have to do is add the data-aos attribute to your html element and then specify the animation name that you would like to use.

<div data-aos="animation_name">

You can also specify per-element basis settings if you don’t want to set them while initializing AOS script.

<div

data-aos="fade-up"

data-aos-offset="200"

data-aos-delay="50"

data-aos-duration="1000"

data-aos-easing="ease-in-out"

data-aos-mirror="true"

data-aos-once="false"

data-aos-anchor-placement="top-center"

>

</div>

I personally prefer to set my settings globally inside the script so I don’t have to change the settings for each element separately.

Here’s my go-to global settings for anyone who is curious.

AOS.init({ easing: 'ease-out-back', duration: 800, delay: 300, once: true, disable: 'mobile' });

step 6: Watch the magic happen! With just 5 easy steps, your HTML element will be animated!

I hope you learned something new today and are excited to implement this awesome library into your own web applications! Thanks for reading! 😊