AOS Fade-Up Gallery — Free Animate On Scroll Gallery Snippet

AOS (Animate On Scroll) is one of the oldest and most widely used scroll-reveal libraries because of how little code it asks for: mark any element with a data-aos attribute, call AOS.init() once, and the library handles observing scroll position and toggling the reveal — no bespoke IntersectionObserver setup, no manual class-toggling logic. This snippet builds a photo/card gallery that fades each item upward as it scrolls into view, entirely through HTML attributes.

Attribute-driven, not code-driven

Every card carries data-aos="fade-up" and an optional data-aos-delay. AOS scans the DOM on init, attaches a single shared scroll listener (internally using an IntersectionObserver-like strategy), and adds a visibility class to each element as it crosses its trigger offset — the corresponding CSS transition, already defined in AOS's own stylesheet, handles the actual fade and translate. This is fundamentally different from the Scroll Reveal Grid snippet's GSAP-driven approach: there's no JavaScript describing the animation itself, only markup describing intent.

Per-column stagger via data-aos-delay

Rather than JavaScript computing a stagger, this gallery hand-assigns data-aos-delay values (0, 80, 160ms) cycling across the three-column grid, so each row reveals with a gentle left-to-right cascade. Because AOS applies delay via plain CSS transition-delay, this scales to any number of items without any stagger-calculation logic — you're placing the delay directly where the element is defined.

Configuring global behavior

AOS.init({ duration: 650, easing: 'ease-out-cubic', once: false, offset: 80 }) sets library-wide defaults: once: false means elements fade out and back in every time they cross the trigger point (rather than firing only the first time, which is AOS's default), and offset: 80 triggers the reveal 80px before the element's edge would otherwise cross the viewport, giving reveals a slight head start. Every one of these can also be overridden per-element with matching data-aos-* attributes if you need item-level control.

When AOS is the right tool

For straightforward "fade/slide/zoom on scroll" reveals across many elements — galleries, feature lists, testimonial rows — AOS's attribute-based approach is faster to wire up and easier to hand off to non-JS-heavy contributors than a bespoke animation script. For more elaborate sequencing, pinning, or scrubbing, a library like GSAP ScrollTrigger (see Scroll Reveal Grid) or native CSS scroll timelines (see View Timeline Image Reveal) offer more control at the cost of more code.

Customizing it

Swap fade-up for any of AOS's built-in animations (fade-down, zoom-in, flip-left, and more), adjust data-aos-duration per element, or combine with a Photo Gallery layout using real images instead of gradient swatches.