AOS

Overview

AOS (Animate On Scroll) is a lightweight JavaScript library that adds scroll-triggered animations to HTML elements using CSS3 transitions. It lets developers attach fade, flip, zoom, and other animation effects to elements that activate as the user scrolls through a page.

The library works by reading custom data attributes placed directly in HTML markup. Developers add attributes like data-aos to define the animation type and optional attributes to control duration, delay, easing, and offset. This approach keeps animation logic out of JavaScript files and inside the HTML structure.

Key Benefits

• Supports 28+ preset animation types including fade, flip, zoom, and fade-zoom combinations without writing custom keyframes.
• Animations activate only when elements scroll into view, reducing motion on non-visible content and improving perceived performance.
• Configuration happens entirely through HTML data attributes, eliminating the need to write or edit JavaScript for basic setups.
• Available via Yarn, npm, Bower, and CDN (unpkg), making it compatible with most modern build tools and static sites.
• Animation behavior is customizable through attributes including duration, delay, offset, easing function, anchor placement, and anchor element reference.
• Distributed as two small files (a CSS stylesheet and a JavaScript file) with no third-party dependencies.

How It Works

You include the AOS CSS and JavaScript files in your HTML page through a CDN link or a package manager. You add the data-aos attribute to any element you want to animate — for example data-aos="fade-up — and optionally set attributes like data-aos-duration, data-aos-delay, data-aos-offset, data-aos-easing, or data-aos-anchor-placement to fine-tune behavior. You then call AOS.init() in a script tag to initialize the library. As the user scrolls, the library applies the pre-configured CSS3 transitions when each element scrolls into the viewport.

Use Cases

• Front-end developers building landing pages who want fade-in, slide-in, or zoom effects without writing custom CSS animations from scratch.
• Designers prototyping in HTML who need scroll-triggered transitions quickly using only HTML attributes and no JavaScript animation libraries.
• Static site creators using Jekyll, Hugo, or vanilla HTML who want lightweight scroll animations without pulling in a heavy framework dependency.
• Portfolio or personal website builders adding entrance animations to project cards, testimonials, or hero sections with minimal setup effort.
• Marketing page developers who want consistent, reusable scroll animation patterns across multiple pages without maintaining separate CSS keyframe definitions per effect.

Why Choose This Product

AOS is best suited for developers who want scroll-triggered CSS3 animations with minimal configuration and no JavaScript animation code. The library is open source, dependency-free, and installable through multiple package managers and CDN sources. It is a pure front-end library with no backend, pricing, or support tiers — all features are available to anyone who downloads or links the files.