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

  • yarn add aos@next
  • or npm install --save aos@next

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:

  • init - initialize AOS
  • refresh - recalculate all offsets and positions of elements (called on window resize)
  • refreshHard - reinitalize array with AOS elements and trigger refresh (called on DOM changes that are related to aos elements)

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

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

Fade animations:

  • fade
  • fade-up
  • fade-down

Flip animations:

  • flip-up
  • flip-down

Slide animations:

  • slide-up
  • slide-down

Easing functions:

  • linear
  • ease
  • ease-in
  • ease-out

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


Adding Custom Animations

[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

Software Engineer. I try to be kind and friendly. 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