A blank screen is the first thing a visitor sees while the site loads. But they could be seeing smoothly appearing content blocks instead.

Scroll-triggered animation is no longer decorative. It directs attention, sets the scrolling rhythm, and brings landing pages to life. But choosing a tool at random means risking performance and breaking layouts on mobile.

Below are three working approaches to scroll animation in 2026, from native JavaScript without a single dependency to ready-made libraries with dozens of effects. As a bonus, we break down the fatal flaw of Revealator, a plugin that was once popular but got stuck in 2020.

💡 Quick overview:

• You'll understand how Intersection Observer API enables reveal animations without jQuery or third-party libraries
• You'll explore AOS, the most popular library (28,000 stars on GitHub), its classes, attributes, and 5-minute setup
• You'll compare ScrollReveal and AOS by learning curve, bundle size, and flexibility
• You'll learn why Revealator can no longer be used on new projects
• You'll get a comparison table and a ready choice for your task

Intersection Observer API, a native approach without dependencies

A browser API that tracks when an element intersects the viewport. No jQuery, no polyfills for modern browsers. Support reaches 97%+ of the global audience according to Can I Use.

The principle is simple: you create an observer, attach it to target elements, and get a callback when an element enters the visible area. At that moment, you add a CSS class with animation.

1
const observer = new IntersectionObserver((entries) => {
2
  entries.forEach(entry => {
3
    if (entry.isIntersecting) {
4
      entry.target.classList.add('visible');
5
    }
6
  });
7
}, { threshold: 0.1 });
8
 
9
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

The code above tracks all elements with the .reveal class. When an element enters the viewport (the threshold value is set in the code), the animation triggers. You define the CSS for it yourself, any @keyframes you like.

1
.reveal {
2
  opacity: 0;
3
  transform: translateY(30px);
4
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
5
}
6
 
7
.reveal.visible {
8
  opacity: 1;
9
  transform: translateY(0);
10
}

Pros of the approach: zero dependencies, no bundle growth, full control over triggers and CSS animation. Suitable for projects where every kilobyte matters and performance on weak devices is critical.

Cons: you need to write your own wrapper for re-triggering, delays, and cascading animations. Libraries do this out of the box.

For a pure JS project with high speed requirements, go with Intersection Observer. If you don't want to write the wrapper manually, look at AOS.

AOS (Animate on Scroll), a library with 28,000 stars

AOS is the de facto standard for scroll animations in web development. The GitHub repository holds 28,000+ stars and 2,600 forks. The library is so simple that setup takes exactly two minutes.

Connect CSS and JS, via CDN or npm:

1
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
2
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
3
<script>AOS.init();</script>

After that, any element with a data-aos attribute comes to life on scroll:

1
<div data-aos="fade-up">Этот блок выплывет снизу</div>
2
<div data-aos="zoom-in" data-aos-delay="300">Этот — с задержкой 300 мс</div>

There are over 30 built-in effects: fade, flip, zoom, slide in all directions. You control duration (data-aos-duration), delay (data-aos-delay), offset (data-aos-offset), and even anchor (data-aos-anchor), when one element's animation is tied to the appearance of another.

Pros:

• 5-minute setup, three lines of code and data attributes
• 30+ built-in easing functions, cascading and anchor animations
• Active repository, bugs get closed, issues have 0 overdue

Cons:

• Dependency on the author: the project is alive but updates are infrequent (last release is 2.3.1)
• Pure CSS approach: no programmatic logic (conditional animations, dynamic parameters)

Use AOS when: you need development speed, 30+ effects out of the box, animation on a typical landing page with a dozen blocks.

ScrollReveal, a JavaScript-first alternative

ScrollReveal is a library in the same class with 22,000+ stars on GitHub. Unlike AOS, it's controlled from JavaScript, not data attributes.

1
ScrollReveal().reveal('.block', {
2
  delay: 200,
3
  distance: '50px',
4
  origin: 'bottom',
5
  duration: 600,
6
  reset: true
7
});

Key difference from AOS: full API in JS. You change animation parameters programmatically, load them from the server, bind them to conditions. For complex logic, this solves it.

Pros:

• JS control: you can manage animation from anywhere in the code
• reset: true, repeated animation when scrolling up and back down
• Support for CSS selectors of any complexity

Cons:

• Slightly steeper learning curve than AOS, no visual data-attribute approach
• Fewer built-in easing functions

The choice between AOS and ScrollReveal comes down to one thing: data attributes or JavaScript. For a typical landing, go with AOS. For an SPA where animation is part of the business logic, go with ScrollReveal.

Revealator: a historical note

Revealator is a jQuery plugin from QODIO that in 2016-2018 was a simple solution for animating blocks: you attach classes like revealator-fade, revealator-slideup, and revealator-zoomout, and elements appear on scroll. The demo page on jQueryScript still works, you can see the effects.

The problem is that the GitHub repository was archived in April 2023 with the note "DEPRECATED, no longer actively maintained." The last meaningful commit was in December 2020. The plugin pulls jQuery as a dependency in a world where 97% of sites no longer use jQuery for new features. There's no support, bugs aren't fixed, modern browser APIs aren't used.

Don't use Revealator on new projects. If you find it in an old codebase, migrate to Intersection Observer or AOS. The task is the same, but performance and maintainability are an order of magnitude higher.

Comparison of approaches

For a quick landing, AOS is enough. For an SPA with programmatic control, ScrollReveal. For a project with strict performance requirements and zero tolerance for dependencies, pure Intersection Observer. Revealator is not in the race.

Watch the 6-minute breakdown from Kevin Powell, he shows scroll-triggered reveal animation with pure CSS and Intersection Observer, without a single library.

⁉️🤔 Common questions

Why use reveal animation on a landing page, doesn't it slow down the site?

Properly done animation doesn't slow things down. Intersection Observer works asynchronously off the main thread, CSS animations render on the GPU via transform and opacity, no repaint is triggered. Problems start when you animate width, height, or left/top, that jerks the layout. Libraries like AOS only animate transform and opacity. The main rule is don't animate geometry.

Can you use AOS on a site with a heavy JS framework, React or Vue?

You can, but with a caveat: AOS scans the DOM at initialization and doesn't see elements added reactively after AOS.init(). The solution is to call AOS.refresh() after mounting the component. In React, that's useEffect, in Vue, mounted. For deep integration with state, ScrollReveal is more convenient since it's managed purely from JS.

How is Intersection Observer better than the old approach with jQuery scroll events?

The jQuery approach attaches a listener to scroll, the event fires dozens of times per second, each call reads element geometry (triggers reflow), the site lags. Intersection Observer works asynchronously, the callback is invoked once on actual visibility change. On a page with 50 animated blocks, the performance difference is about 40 times in favor of Observer, according to tests by WebKit developers.

What to do if animation stutters on mobile?

First, check that you're only animating transform and opacity. Second, add will-change: transform, opacity to the element before animation starts and remove it after. Third, on weak devices, reduce duration to 200-300 ms: fast animation is perceived as smoother than jerky slow animation. On devices with a 60 Hz screen refresh rate, animation shorter than 300 ms doesn't have time to tire the eye.

Can you make reveal animation without JavaScript at all?

Partially, through CSS Scroll-driven Animations, but the specification is still experimental: it works in Chrome 115+, but not in Firefox or Safari. For production, you need either Intersection Observer (native, without libraries) or a polyfill. For a production site in 2026, the minimal option is Intersection Observer without libraries: native JS, zero dependencies, full support.

Which approach to choose for a landing page in 2026

If you're making a typical landing with 5-10 blocks and a "yesterday" deadline, AOS. Three lines of code, 30 effects, hard to mess up.

If it's an SPA on React/Vue and animation is tied to business logic, ScrollReveal. Programmatic control makes up for the extra 5 minutes of setup.

If the performance budget is strict and the designer drew unique animations, Intersection Observer. Zero kilobytes, full control over CSS, maximum speed.

Don't use Revealator. The plugin was good in 2016, but the world has moved on.

Try AOS on a test page, npm install aos --save or CDN in 5 minutes. Feel the difference between a static landing and a page where blocks come to life on scroll. Write in the comments which approach you chose and why.