aos / animate on scrollevery effect, live
AOS animation, every effect
All 27 data-aos effects running on this page, each with the markup to copy. Set the duration and easing once and every specimen follows. The markup is the same for AOS 2.3.4 and for the drop-in this page runs on.
- Effects
- 27
- Easings
- 20
- Anchor placements
- 9
- Drop-in
- 3.2 KB
fade-upopacity 0 → 1 · y +100px → 0
zoom-inopacity 0 → 1 · scale 0.6 → 1
slide-leftx +100% → 0 · no fade
flip-uprotateX −100° → 0 · back face hidden
AOS in three lines
Load the stylesheet and the script, name an effect on any element with data-aos, and call AOS.init() once. The element animates when it scrolls into view.
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css">
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<div data-aos="fade-up">Fades up as it scrolls into view</div>
<script>AOS.init();</script>Every AOS effect, live
9 fade, 10 zoom, 4 slide and 4 flip effects. Each specimen below is a data-aos element, so what you see is exactly what the attribute does on your page.
Scroll a specimen out of view and back to see it again, or press ↻.
Fade · 9
Opacity from 0, plus a 100px move in the named direction. Plain fade only changes opacity.
fadefade-upfade-downfade-leftfade-rightfade-up-rightfade-up-leftfade-down-rightfade-down-left
Zoom · 10
Opacity from 0 and a scale: zoom-in grows from 0.6, zoom-out shrinks from 1.2. The directional ones also move 100px.
zoom-inzoom-in-upzoom-in-downzoom-in-leftzoom-in-rightzoom-outzoom-out-upzoom-out-downzoom-out-leftzoom-out-right
Slide · 4
A move of the element’s own full size, with no fade. Put it in a container with overflow: hidden if it should not show outside.
slide-upslide-downslide-leftslide-right
Flip · 4
A 3D rotation of 100° around the named axis, back face hidden, with no fade.
flip-upflip-downflip-leftflip-right
Every data-aos attribute
Each attribute sets one element. The same settings for the whole page go in AOS.init(), under the option name; an attribute on an element wins over the option.
| Attribute | Option | Default | What it does |
|---|---|---|---|
| data-aos | — | — | The effect: one of the names above. |
| data-aos-offset | offset | 120 | Pixels from the trigger point before it starts. |
| data-aos-delay | delay | 0 | Milliseconds to wait before animating in (not on the way out). |
| data-aos-duration | duration | 400 | Milliseconds the animation lasts. |
| data-aos-easing | easing | ease | One of the easing names below, or any CSS timing function. |
| data-aos-once | once | false | Animate only the first time it scrolls into view. |
| data-aos-mirror | mirror | false | Also animate out when scrolling past it. |
| data-aos-anchor-placement | anchorPlacement | top-bottom | Which edge of the element meets which edge of the window. |
| data-aos-anchor | — | — | A selector: trigger on another element’s position instead. |
AOS.init({
offset: 120, // px from the trigger point
delay: 0, // ms, on the way in only
duration: 400, // ms
easing: 'ease',
once: false, // animate only the first time
mirror: false, // also animate out when scrolled past
anchorPlacement: 'top-bottom',
});data-aos-anchor-placement names which edge of the element meets which edge of the window: top-bottom, the default, starts the animation when the element’s top reaches the bottom of the window. All 9: top-bottom, top-center, top-top, center-bottom, center-center, center-top, bottom-bottom, bottom-center, bottom-top.AOS easings
data-aos-easing takes CSS’s five built-in timing names or one of AOS’s fifteen curves. Pick one in the gallery’s easing control to see it on every effect.
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
AOS questions
What is AOS?
AOS (Animate On Scroll) is a small JavaScript library that animates elements as they scroll into view. You mark an element with a data-aos attribute naming the effect, load aos.css, and call AOS.init(). It has 27 effects in four families (fade, zoom, slide and flip). Its latest release is 2.3.4.
How do I use AOS?
Load aos.css and aos.js (from npm or a CDN), add data-aos="fade-up" (or any effect name) to the elements to animate, and call AOS.init() once. Timing goes on each element with data-aos-duration, data-aos-delay and data-aos-easing, or for the whole page in the AOS.init() options.
Why is my AOS animation not working?
The usual causes: AOS.init() is never called, or is called before the elements exist (call AOS.refreshHard() after adding them); aos.css is not loaded, so nothing moves; or the element scrolls inside its own container, while AOS only watches the window scroll.
How do I make an AOS animation play only once?
Add data-aos-once="true" to the element, or pass once: true to AOS.init() for every element. By default AOS animates an element out again when you scroll back above it, and in again when it returns.
How do I use AOS in React or Next.js?
Call AOS.init() once in the browser, in a useEffect in your root component, and keep the data-aos attributes in your JSX. In the Next.js App Router that needs a small 'use client' component in app/layout.tsx; the svg-scroll-draw drop-in ships one, <AOSInit />.
Does AOS respect prefers-reduced-motion?
AOS 2.3.4 does not check it, so elements still move for readers who asked their system for less motion. The svg-scroll-draw drop-in shows every element in its final state instead, including when the setting is turned on while the page is open.
The drop-in this page runs on
AOS has not had a release since 2.3.4. svg-scroll-draw/aos speaks the same API and the same markup, with the styles inside the module (3.2 KB against AOS’s 6.7 KB with its stylesheet) and reduced motion respected. Switching is an import change.
npm i svg-scroll-draw
// The same markup and the same API. No aos.css: the styles ship inside.
import AOS from 'svg-scroll-draw/aos';
AOS.init({ duration: 800, easing: 'ease-out-cubic', once: true });<script src="https://unpkg.com/svg-scroll-draw@2.23.3/dist/cdn/aos.global.js"></script>
<script>AOS.init();</script>Step by step for React and Next.js; the full comparison with AOS and ScrollReveal is on AOS compared.