Animate Content On Scroll with CSS Library

Have you tried different tutorials to animated content as you scroll up and down a page? No Luck? Behold, the CSS On Scroll library is just what you are looking for!

You have seen many long page templates where different kinds of animation are applied to content elements as you scroll down.

Today, we have an AOS CSS plugin that makes it’s super easy to handle different animation by using its class with full control over the elements.

The plugin work in a simple way. You only require to apply the different classes to the content div element. It will trigger animation as you scroll up or down.

You don’t need to write the bunch of keyframes coded from scratch. All you have to apply classes according to the type of animation you need for a specific element.

This Library has two great features which allow you to add your own animation easily. You can change the things according to the viewport.

It has all the logic inside the Javascript.
All the animation in the stylesheet.

The AOS library simply watches all the elements and their position based on the settings you provide them. Then it will add or remove the class aos-animate. Of course, Practically its not so easy but AOS make it simple for you.

Basic Usages

It’s easy to implement the library on any kind of website. You need to add styles in <head> to get started. The plugin gives you CDN sources if you don’t want to load them from your server.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" />

Next step to add script right before closing </body> element. To initialize AOS Animate on Scroll library, Just define it’s init function.

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
    AOS.init();
</script>

AOS plugin offers you variety of option which you can easily configure to handle the way of working elements. You can change them according to your requirements.

// You can also pass an optional settings object
// 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

});

Example HTML

The markup is simple. Just define an HTML element (mostly div) and add a data-aos attribute. Then you can specify the animation class name that you would like to use.

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

Further customization, you can adjust its behavior by using data-aos-* attributes. Let’s find the full list of all animation, easings and anchor placements.

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

If you want data-aos-* attributes behavior similar way on all of your page elements then you can define them as globally inside of adding them with each element separately.

Example Animations in CSS

You don’t need to write your own CSS. Just pick and apply classese. There are alot of animations included in the libaray which you can use.

But if you want to create custom one, you can easily do that. Its simple and easy to create new one as:

[aos="my-new-animation"] {
  opacity: 0;
  transition-property: opacity;
}

[aos="my-new-animation"].aos-animate {
  opacity: 1;
}

No need to worry about duration or delay because they are already in the aos.js library. In the CSS, you only:

Just define the styles for the attribute aos with the name of you animation.
Next, set the transition-property (by default this is all, so it’s more performant and more predictable if you narrow the transition to the intended properties)
Finally, add the post-transition properties on .aos-animate

That’s Done! What you think about this tutorial? Does it solve your issue? I hope you learned something new and will surely impplement this awesome simple library into your web page. Thanks for reading!