How to Animate Elements on Your Page As You Scroll

AOS is a library that can help

Indrek Lasn
Oct 19 · 3 min read
Scroll animations

AOS (Animate On Scroll) allows you to animate elements as you scroll down, and up. If you scroll back to the top, elements will animate to their previous state and are ready to animate again if you scroll down.

AOS Github Page — https://github.com/michalsnik/aos

Step One: Install AOS Using Package Managers

You can install AOS via npm or Yarn:

Next, import script and styles and initialize AOS:

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init(); // init the library

The AOS object is exposed as a global variable; for now, there are three methods available:

By default, AOS watches for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM, it calls refreshHard automatically.

In browsers that don’t support MutationObserver, like Internet Explorer, you might need to call AOS.refreshHard() by yourself.

In order to get started using AOS, here are the steps we need to take.


Step Two: Initialize AOS

Here are all the configuration options you have available:

Set animation using thedata-aos attribute:

<div data-aos="fade-in"></div>

And adjust behavior by using data-aos-* attributes:

<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>

Types of Animation

You have the option to apply different animations and easings to your elements. Here are some examples you can use:

Fade animations:

Flip animations:

Slide animations:

Easing functions:

See the full list of all animations, easings and anchor placements:


Adding Custom Animations

Sometimes built-in animations are just not enough. Let’s say you need one box to have different animations depending on the resolution. Here’s how you could do it:

[data-aos="new-animation"] {
opacity: 0;
transition-property: transform, opacity;
&.aos-animate {
opacity: 1;
}
@media screen and (min-width: 768px) {
transform: translateX(100px);
&.aos-animate {
transform: translateX(0);
}
}
}

Then use it in HTML:

<div data-aos="new-animation"></div>

The element will only animate opacity on mobile devices, but from 768px width, it’ll also slide from right to left.

You can also integrat an external CSS animation library, such as Animate.css:

Use animatedClassName to change the default behavior of AOS to apply class names placed inside data-aos on scroll.

<div data-aos="fadeInUp"></div>AOS.init({
useClassNames: true,
initClassName: false,
animatedClassName: 'animated',
});

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Engineer, founder. Let’s change the world together for the better. Follow me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade