AOS

What Is AOS?

AOS, short for "Animate On Scroll," is a small, dependency-free JavaScript library that animates elements into view as a visitor scrolls down a page. You add a single data attribute to an HTML element, such as data-aos="fade-up", and AOS handles the rest: it watches the scroll position, detects when the element enters the viewport, and applies a CSS transition that fades, slides, zooms, or flips the element into place. The effect is the familiar "content reveals as you scroll" motion seen on countless modern marketing sites, portfolios, and landing pages.

AOS is open source and free under the MIT license, created by Michał Sajnóg. It has long been one of the most popular scroll-animation libraries available through npm and public CDNs, favored precisely because it is tiny, easy to drop in, and requires almost no JavaScript knowledge to use. Where a full animation framework expects you to write timelines and code, AOS asks only that you decorate your markup with attributes and call a single initialization function.

It is important to be clear about what AOS is and is not. It is a front-end presentation library that runs in the visitor's browser, not a build tool, a framework, or a content management system. It does not manage your content or your data; it simply adds motion to elements that already exist in the page. Because it leans on the browser's native CSS transitions and the Intersection Observer API rather than animating with heavy JavaScript loops, it stays lightweight and performs well even on modest hardware.

AOS occupies a deliberately narrow niche. It does not try to compete with comprehensive animation engines that orchestrate complex, multi-step sequences. Instead, it does one job, revealing elements on scroll, extremely well and with minimal effort. That focus explains why it shows up so often on template-built sites, agency landing pages, and personal projects where a designer wants tasteful entrance animations without writing or maintaining custom animation code. For many sites, AOS provides ninety percent of the perceived polish of a bespoke animation system for a fraction of the work.

How AOS Works

AOS is built around a simple, declarative model. You include the library's JavaScript and its accompanying CSS file, then call AOS.init() once when the page loads. From that point on, AOS scans the document for any element carrying a data-aos attribute and prepares it for animation.

The value of the data-aos attribute names the animation, for example fade-up, fade-down, zoom-in, flip-left, or slide-right. AOS ships with a fixed catalog of these named animations, each backed by a CSS class and transition defined in its stylesheet. Additional data attributes fine-tune the behavior: data-aos-duration sets how long the animation runs, data-aos-delay staggers it, data-aos-easing chooses the timing curve, data-aos-offset adjusts how far into the viewport the element must travel before triggering, and data-aos-once controls whether the animation replays each time the element re-enters view or fires only once.

Mechanically, AOS attaches a scroll listener (and, in modern versions, leans on the Intersection Observer API) to determine each element's position relative to the viewport. When an element crosses the configured threshold, AOS toggles an aos-animate class on it. The heavy lifting of the visual transition is then performed by CSS, which is why the animations are smooth and inexpensive: the browser's compositor handles opacity and transform changes efficiently. AOS itself mostly manages state and class toggling rather than computing every frame in JavaScript.

A useful detail for both developers and anyone trying to identify AOS is how it modifies the DOM. Before an element animates, it carries its data-aos attribute and sits in its initial, pre-animation state defined by AOS's CSS. After it scrolls into view, AOS adds the aos-animate class, which triggers the transition to the final, visible state. This pairing, a data-aos attribute plus a toggled aos-animate class, is the library's signature and the most reliable way to recognize it in rendered markup.

Because AOS depends on elements having a known position in the layout, it exposes a refresh method to recalculate positions when the page changes, for instance after images load or content is inserted dynamically. Single-page applications and sites with lazy-loaded content typically call AOS.refresh() or AOS.refreshHard() after such changes so animations continue to trigger at the right scroll points. This is one of the few areas where AOS asks for more than a single line of setup, and it is a common source of "the animations stopped working" issues on dynamic sites.

How to Tell if a Website Uses AOS

AOS leaves clear, consistent fingerprints in both the markup and the network requests. Because StackOptic analyzes a URL from the server side, it inspects the same signals you can check manually with browser tools, curl, or a detection extension.

The data-aos attributes. The single strongest signal is the presence of data-aos attributes on elements in the HTML, often accompanied by companion attributes like data-aos-delay or data-aos-duration. Seeing data-aos="fade-up" or similar in the source is close to definitive.

The aos-animate class. On elements that have already scrolled into view, AOS adds the class aos-animate. Finding this class alongside data-aos attributes confirms the library is active, not just present.

The library files. AOS is frequently loaded from a public CDN, so look for script and stylesheet URLs containing aos.js, aos.css, or paths like aos@2 (the package on jsDelivr or unpkg). A request to a file literally named aos.js is a dependable tell.

The initialization call. Inline scripts often contain a visible AOS.init( call, sometimes with a configuration object. This appears in the page source or in a bundled JavaScript file.

A global AOS object. When AOS is loaded, it exposes a global AOS object in the browser. Typing AOS or window.AOS into the DevTools console on a page that uses it returns the library object rather than undefined.

Here is how to check each signal yourself:

Method	What to do	What AOS reveals
View Source	Right-click, "View Page Source"	data-aos attributes, aos.css/aos.js references, an AOS.init( call
Browser DevTools	Inspect elements and the Network tab	aos-animate classes toggling on scroll, requests for aos.js/aos.css
DevTools Console	Type window.AOS and press Enter	Returns the AOS object if the library is loaded
curl -I / curl -s	`curl -s https://example.com	grep -i data-aos`
Wappalyzer	Run the extension on the live page	Identifies "AOS" under JavaScript libraries

A fast command-line check is curl -s https://example.com | grep -i "data-aos". If that returns matches, the page almost certainly uses AOS. For a broader walkthrough of identifying front-end dependencies, see our guide on how to check what JavaScript libraries a website uses, and for the overall methodology, how to find out what technology a website uses.

A note on detection nuance: because AOS animations depend on scroll position, elements below the fold may not yet carry the aos-animate class when you first load the page, but the data-aos attributes are present in the static HTML regardless of scroll state. This is one reason server-side analysis is convenient: it reads the unmodified markup directly and finds the data-aos attributes without needing to scroll the page or execute JavaScript. On sites bundled with a build tool, the aos.js file may be concatenated into a larger bundle and the CDN reference absent, but the data attributes in the HTML remain the giveaway. Combining several signals, the attributes, a toggled class, and a network request or global object, makes the identification reliable even on customized setups.

Key Features

• Declarative, attribute-driven API. Add animations with HTML data attributes alone; no custom JavaScript required for the common case.
• A catalog of ready-made animations. Fades, slides, zooms, and flips in multiple directions cover the most common entrance effects.
• Per-element configuration. Duration, delay, easing, offset, and once-only behavior are all controllable via data attributes.
• CSS-powered transitions. Animations run on the browser's compositor for smooth, low-cost motion.
• Anchor and offset control. Elements can be triggered relative to a different anchor element or at a custom viewport offset.
• Lightweight and dependency-free. A small footprint with no jQuery or framework requirement.
• Refresh hooks. AOS.refresh() and AOS.refreshHard() keep animations accurate on dynamic, lazy-loaded pages.

Pros and Cons

Pros

• Extremely easy to adopt; most use cases need only a stylesheet, a script, and one init call.
• Tiny footprint that adds little weight to a page compared with full animation frameworks.
• Smooth, GPU-friendly transitions thanks to its reliance on CSS.
• Works with any stack, from static HTML to WordPress themes to JavaScript frameworks.

Cons

• Limited to a fixed set of entrance-style animations; not suited to complex, timeline-based sequences.
• Overuse can hurt user experience, making pages feel slow as everything waits to animate in.
• Scroll-triggered reveals can interfere with perceived performance and accessibility if not handled carefully.
• Dynamic content often requires manual refresh calls, a common source of bugs.

Because animation choices can affect how quickly a page feels usable, it is worth weighing AOS against the broader performance picture; our guide on how to make your website load faster covers the trade-offs that matter when adding any front-end script.

AOS vs Alternatives

AOS sits at the simple, declarative end of the web-animation spectrum. The table below compares it with common alternatives.

Library	Approach	Scope	Best for
AOS	Declarative data attributes	Scroll-triggered entrance animations	Quick, tasteful reveals with minimal code
GSAP	Programmatic timelines	Full-featured, complex animation	Precise, multi-step, professional motion
ScrollReveal	Declarative/JS config	Scroll reveals	A similar niche with a slightly different API
Framer Motion	Declarative React components	Component-driven animation	Animated interfaces in React apps
Lenis / locomotive	Smooth-scroll engines	Scroll behavior, often paired with animation	Smooth scrolling and scroll-linked effects

For sophisticated, timeline-based motion rather than simple scroll reveals, a full animation engine is the better tool; see our profile of GSAP for that side of the spectrum. AOS is typically chosen when the goal is a polished entrance effect with the least possible effort, while GSAP and Framer Motion are chosen when motion is a central part of the experience.

Use Cases

AOS is most at home on marketing and brand websites, where sections, cards, images, and statistics fade or slide into view to add a sense of polish and guide the eye down the page. Agencies and template authors reach for it constantly because it delivers a designed, premium feel without custom animation code, which keeps build times short and client sites maintainable.

It also suits personal portfolios and résumé sites, where subtle entrance animations make a single-page layout feel more dynamic, and landing pages, where staggered reveals draw attention to features, testimonials, and calls to action in sequence. Long-form content pages use it to make storytelling more engaging as the reader scrolls. Because it is framework-agnostic, AOS appears across WordPress themes, static-site builds, and JavaScript-framework projects alike.

Consider a few concrete scenarios. A small agency building a product launch page might use AOS to fade in each feature block as the visitor scrolls, with short staggered delays so the items appear in a pleasing cascade. A freelancer's portfolio might zoom project thumbnails into view to make the work feel lively on an otherwise static page. A startup's homepage might slide in customer-logo rows and animate key metrics to reinforce credibility. In each case, the motion is decorative and lightweight rather than functional, exactly the niche AOS targets.

From a technology-research and competitive-analysis standpoint, detecting AOS is a small but telling signal. It often indicates a design-conscious, template-driven, or agency-built site that values presentation, and it is common on the kinds of marketing pages that lead-generation and martech vendors care about. Recognizing it quickly across many domains, rather than inspecting each page by hand, is where automated technology detection earns its keep, and it pairs naturally with detecting the broader front-end stack a site relies on.

Frequently Asked Questions

Is AOS free to use?

Yes. AOS is open source under the MIT license, which means it is free to use in personal and commercial projects, including the ability to modify and redistribute it. You can install it from npm or load it directly from a public CDN such as jsDelivr or unpkg. There is no paid tier or licensing fee, which is part of why it is so widely adopted on small and template-built sites.

How can I tell if a website uses AOS for free?

View the page source and look for data-aos attributes on elements, references to aos.js or aos.css, or an AOS.init( call in an inline script. In DevTools, type window.AOS into the console; if it returns an object rather than undefined, the library is loaded. A single curl -s URL | grep data-aos from any terminal works too, and free tools like Wappalyzer confirm it under JavaScript libraries.

Does AOS hurt website performance or SEO?

AOS itself is lightweight and uses efficient CSS transitions, so the library adds little overhead. The bigger considerations are user experience and perceived performance: if too much content is hidden until it animates in, the page can feel sluggish or, in rare cases, leave content invisible if JavaScript fails. Search engines render and index content regardless of scroll animations, so AOS does not inherently harm SEO, but heavy or misconfigured animation can affect Core Web Vitals and accessibility.

Why do some AOS animations not trigger on dynamic pages?

AOS calculates element positions when it initializes. On single-page applications or pages that load content lazily, elements added after AOS.init() may not be tracked, so they fail to animate. The fix is to call AOS.refresh() or AOS.refreshHard() after the new content is inserted, which recalculates positions and re-registers elements. This is the most common reason developers see animations "stop working" on interactive sites.

Is AOS accessible for users who prefer reduced motion?

AOS animations are decorative, and best practice is to respect the operating system's "reduce motion" setting using the prefers-reduced-motion media query so that users sensitive to motion are not subjected to large movement. AOS can be disabled or have its animations neutralized for those users with a small amount of CSS or configuration. Whether a given site actually does this depends on the developer; the library does not force motion on users who have opted out if the site is built thoughtfully.

Want to identify AOS and the rest of a site's front-end stack automatically? Run any URL through StackOptic at https://stackoptic.com.