"Animate On Scroll" — a tiny, zero-JavaScript-needed library. You add a single data-aos attribute to any element and it animates the moment it scrolls into view. All demos use the real AOS.
Every card below has a different data-aos type. Scroll the panel — AOS detects when each crosses into view and plays its entrance. Scroll back up and they reset.
data-aos="fade-up"The default workhorse — rises and fades in.
data-aos="fade-right"Slides in from the left edge.
data-aos="zoom-in"Scales up from small to full size.
data-aos="flip-up"Rotates in on the X axis like a flipping card.
data-aos="fade-left"Slides in from the right edge.
data-aos="zoom-in-up"Combines a scale and an upward slide.
<!-- markup is all you write --> <div data-aos="fade-up">Hello</div> // once, on load: AOS.init({ duration: 700, easing: "ease-out-cubic" });
Add an increasing data-aos-delay to neighbouring elements and they cascade in one after another. Scroll this grid into view.
AOS reads global options like duration and easing. Pick settings, then re-init — scroll the first demo again to feel the change.
After applying, scroll the cards in Demo 01 back into view to see the new timing.
cdn.jsdelivr.net/npm/aos and started with AOS.init(). Every reveal is driven by genuine data-aos attributes — no custom animation code. Because AOS watches a scroll container, the demos live inside scrollable panels. Page chrome is the shared CSS shell.