3 Libraries for Adding Scroll Reveal Animations to Websites

For years, AOS (Animate On Scroll) was the go to library for adding scroll reveal animations to websites. It was lightweight, easy to use, and worked well for a wide range of projects.

Recently, however, I started looking for a more modern alternative. While AOS still works, development appears to have slowed considerably, with its last major release dating back to 2018. I wanted something actively maintained that offered the same simplicity and flexibility.

After researching and experimenting with several options, these are the three libraries that stood out.

1. Usal.js

Usal.js was one of the first alternatives I tried, and it turned out to be the easiest to use. The setup is straightforward, with no complex configuration required. In many ways, the experience feels very similar to AOS, making it an excellent option for anyone looking for a familiar replacement.

If you’re coming from AOS, the learning curve is minimal.

Usal.js includes a variety of scroll reveal animations, including:

• Fade
• Slide
• Flip
• Zoom

It also provides additional animation types such as text animations and animated counters.

Usage

Install the package with npm:

npm install usal

Or include it directly from a CDN:

<script src="https://cdn.usal.dev/latest"></script>

Then add animations using the data-usal attribute:

<div data-usal="fade-u">Fade Up</div>

One thing to keep in mind is that animations moving along the x-axis can temporarily create horizontal scrollbars. To prevent this, add the following CSS:

body {
  overflow-x: hidden;
}

2. Trig.js

Trig.js was the next library I tested. Like Usal.js, it’s easy to get started with and comes with a collection of prebuilt animations, making it a good choice for developers who don’t want to create custom effects from scratch.

Available animation styles include:

• Fade
• Pop
• Grow
• Roll
• Reveal
• Flip
• Parallax

Usage

Include both the JavaScript and CSS files:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
<script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>

Then apply animations using the appropriate classes:

<div class="trig-fade enable-trig">
  <div class="trig-target">
    .trig-fade
  </div>
</div>

Compared to Usal.js, the markup is slightly more verbose, but it remains simple and beginner friendly. With Trig.js, you can ditch the prebuild animations and create use your own CSS animations.

3. Motion

Motion was the final alternative I explored. Unlike AOS, Usal.js, or Trig.js, Motion does not provide prebuilt HTML attributes or CSS classes for scroll reveal animations.

Instead, Motion gives you the tools to build your own animations programmatically. This requires writing more code, but it also offers significantly more control and flexibility.

If you need highly customized animations or complex interactions, Motion is arguably the most powerful option of the three.

Usage

Install Motion with npm:

npm install motion

Then import the functions you need:

import { animate, scroll } from "motion";

Or use the CDN version:

<script src="https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js"></script>

<script>
  const { animate, scroll } = Motion;
</script>

Here’s an example of a simple fade up scroll reveal animation:

addEventListener("DOMContentLoaded", () => {
  const { animate, inView } = Motion;

  const animation = {
    initial: { opacity: 0, y: 50 },
    animate: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: 20 }
  };

  document.querySelectorAll(".fade-up").forEach((element) => {
    animate(element, animation.initial, { duration: 0 });

    inView(
      element,
      () => {
        animate(element, animation.animate, {
          duration: 0.8,
          easing: [0.22, 1, 0.36, 1]
        });

        return () =>
          animate(element, animation.exit, {
            duration: 0.5,
            easing: "ease-in"
          });
      },
      {
        margin: "0% 0px 0% 0px"
      }
    );
  });
});

Which One Should You Choose?

Each library serves a slightly different audience:

• Usal.js: Best for developers who want an AOS-like experience with minimal setup.
• Trig.js: Great if you want a collection of prebuilt animations and don’t mind slightly more verbose markup.
• Motion: Ideal for developers who need complete control over animation behavior and are comfortable writing JavaScript.

Live Demos

I also built a small demo with each library while evaluating them. If you’d like to see how they work in practice, you can check them out below:

• Usal.js Demo

  The quickest to set up. Most animations required little more than adding a data attribute.

• Trig.js Demo

  Provides a good selection of prebuilt effects with minimal JavaScript.

• Motion Demo

  Required more code but offered the most flexibility and control over animation behavior.

These aren’t exhaustive showcases, but they should give you a good idea of how each library behaves in a real project and how much setup is required to get started.