Related Snippets

61 in this category
7–12 of 61
CurrentWOW.js Staggered Testimonial Wall

WOW.js Staggered Testimonial Wall

Konva Drag & Snap Shapes

Konva Drag & Snap Shapes

Fabric.js Shape Annotation Tool

Fabric.js Shape Annotation Tool

Fabric.js Sticky Note Board

Fabric.js Sticky Note Board

Interact.js Pinch-Zoom Image

Interact.js Pinch-Zoom Image

Babylon.js Orbit Camera Showcase

Babylon.js Orbit Camera Showcase

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

WOW.js Staggered Testimonial Wall — Masonry Reveal Snippet

WOW.js Staggered Testimonial Wall · Misc · Plain HTML, CSS & JS · Live preview

What's included

Features

Data-driven wall
Cards are generated from a JS array, so the count and content are not hand-authored in HTML.
Computed stagger delay
Each card's data-wow-delay is derived from its approximate column and row, not its raw index.
CSS columns masonry
column-count creates the uneven Pinterest-style layout without a JS layout library.
zoomIn over fadeInUp
A scale-based entrance avoids the visual collisions a slide entrance causes on a dense wall.
Configurable offset
offset: 50 delays the reveal trigger slightly past the raw viewport edge.
Star rating rendering
Filled and empty star characters are generated per testimonial from a numeric rating.
Responsive column count
The wall drops from 3 to 2 to 1 columns at standard breakpoints.
Break-inside safe cards
break-inside: avoid keeps a card from being split across two columns.

About this UI Snippet

WOW.js Staggered Testimonial Wall — Computing Delay Without a Grid

Screenshot of the WOW.js Staggered Testimonial Wall snippet rendered live

The scroll reveal cards snippet hand-writes data-wow-delay on each card because it's a fixed, small grid. A testimonial wall is different: the data is dynamic (nine testimonials today, twenty tomorrow) and the layout is a CSS column flow, not a CSS grid — so there's no reliable grid-row/grid-column to read the way you could with display: grid. This snippet computes the delay itself, in JavaScript, at render time.

Why column-count breaks naive stagger math

.ttw-wall { column-count: 3 } is a masonry-style layout: the browser fills column 1 top to bottom, then column 2, then column 3, packing each card into whichever column has room next based on its height. That's what gives the wall its uneven, Pinterest-like silhouette — but it also means DOM order and visual position diverge. Card index 3 in the source might land at the top of column 2 or the middle of column 1 depending on how tall cards 0-2 turned out. A naive index * delay stagger would apply delays in source order, which no longer correlates cleanly with the visual left-to-right, top-to-bottom reading a viewer actually does.

This snippet uses a deliberate approximation rather than solving that exactly: col = i % COLS and row = Math.floor(i / COLS) pretend the wall is a strict 3-wide grid even though CSS columns don't guarantee that mapping. It's not pixel-perfect, but it's good enough that the reveal reads as a diagonal wave rather than a flat list sweep, and it costs one line of arithmetic instead of measuring getBoundingClientRect() on every card after layout (which would require waiting a frame for the column layout to settle, then re-triggering WOW.js's scan — real complexity for a cosmetic improvement).

The formula

delay = col * 0.12 + row * 0.18

Column contributes a small delay so cards across the same visual row feel like a left-to-right sweep; row contributes a larger delay so successive rows clearly lag behind the ones above. Both values are tunable — raise the row coefficient and the wall reveals in more distinct horizontal bands; raise the column coefficient and it reads more like a left-to-right wipe.

animate__zoomIn instead of fadeInUp

Swapping the animate.css class is the only other change from the base pattern, and it matters for a wall of many small cards: zoomIn scales from 0.3 to 1 with no vertical travel, so cards popping in at staggered times across three columns don't visually collide by sliding through each other's space the way a fadeInUp wall of that density can.

offset: 50

Passing { offset: 50 } to new WOW() tells it a card only counts as "revealed" once it's 50px further into the viewport than the raw bottom edge — a small buffer so cards don't trigger the instant a single pixel peeks into view, which reads as premature on a dense wall.

Build with AI

Build, Understand, Optimize, and Extend It With AI

This snippet is worth discussing with an AI specifically around the col/row delay formula, since it's an approximation rather than an exact solution. Paste it into an AI assistant like Claude and ask it to explain why column-count layouts make DOM order and visual position diverge, and then ask it to design a more exact alternative — for example, measuring each card's actual offsetTop and offsetLeft after layout and deriving delay from real pixel position instead of the i % COLS guess. Compare the complexity cost against the visual improvement. Also worth asking: what happens to the stagger formula if TESTIMONIALS grows to 50 entries — does the wave still read cleanly, or does the accumulated row * 0.18 delay make the last cards feel sluggish, and how would you cap total delay with Math.min. To extend it: have it add a "load more" button that appends new testimonials and re-triggers reveals via WOW.js's live re-scan, or swap the star rating for an actual interactive rating input.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a "testimonial wall" using WOW.js (v1.1.2, from a CDN) and animate.css (v4, from a CDN) in plain HTML, CSS, and JavaScript.

Requirements:
- Define an array of at least 9 testimonial objects (name, role, quote, star rating 1-5) in JS, and render each as a card into a container using a CSS column-count: 3 layout (masonry-style, responsive to 2 then 1 columns), with break-inside: avoid on each card so none get split across columns.
- Each generated card must include class="wow animate__animated animate__zoomIn" and a computed data-wow-delay attribute — computed as col * 0.12 + row * 0.18 seconds, where col = index % 3 and row = Math.floor(index / 3), simulating a grid position even though CSS columns don't guarantee one. Explain in a code comment why this is an approximation (DOM order and visual position diverge under column-count) and why it's good enough without measuring real layout positions.
- Render a star rating as filled/empty star characters based on each testimonial's numeric rating.
- Initialize with new WOW({ offset: 50, live: true }).init() after the cards are appended.
- Style as a dark, premium testimonial wall with avatar initials, name, and role per card, and enough bottom page padding that the wall starts below the fold so the reveal is demonstrated on scroll.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

Requires
JS · wow.min.jsCSS · animate.min.css
<div class="ttw-stage">
  <div class="ttw-head">
    <span class="ttw-tag">WOW.js · masonry wall</span>
    <h2>Testimonial Wall</h2>
    <p>Scroll down — every card zooms in with a delay computed from its column and row, not just its position in the markup.</p>
  </div>
  <div class="ttw-wall" id="ttwWall"></div>
</div>

Step by step

How to Use

  1. 1
    Add both CDN fileswow.min.js and animate.min.css — the wall needs both to reveal anything.
  2. 2
    Define your testimonial dataEach entry needs a name, role, quote, and star rating; the wall builds itself from the array.
  3. 3
    Cards get delay computed at render timecol * 0.12 + row * 0.18 is derived from each card's index, not hand-written per card.
  4. 4
    Call new WOW({ offset: 50 }).init()The offset gives a small buffer before a card is considered visible enough to reveal.
  5. 5
    Scroll to see the waveCards zoom in with a diagonal stagger across the three CSS columns.
  6. 6
    Add more testimonialsPush new objects onto the TESTIMONIALS array — the delay formula scales automatically.

Real-world uses

Common Use Cases

CARD
Social proof sections
A dense, lively testimonial wall for a landing or pricing page.
Case study pages
Reuse the same wall pattern for pull quotes from client case studies.
Teaching stagger approximation
A concrete example of computing delay for a layout without a real grid.
Review aggregator pages
Surface many short reviews with movement that guides the eye down the page.

Got questions?

Frequently Asked Questions

column-count is what produces the uneven, masonry-style silhouette where shorter cards pack tighter than taller ones. A real grid would give exact row/column tracking but force every card to the same height per row, which is the opposite of the visual effect this wall is going for.

It is an approximation, not an exact measurement — i % COLS and Math.floor(i / COLS) assume a strict grid that column-count does not guarantee. It is intentionally good enough to produce a diagonal-looking wave without measuring getBoundingClientRect() on every card after layout settles.

fadeInUp travels vertically as it animates, and on a dense multi-column wall with staggered timing, traveling cards can visually overlap the cards below them mid-animation. zoomIn scales in place with no travel, which avoids that collision.

It shifts the trigger point WOW.js uses to decide an element has scrolled into view, requiring it to be 50px further into the viewport than the default edge check. It is a small buffer so cards don't reveal the instant one pixel is visible.

Yes — update both the COLS constant in JS (used for the delay formula) and column-count in CSS to match. They are two separate values because CSS columns has no JS-readable "current column count" at render time.

Yes, because WOW.js is initialized with live: true, which sets up a MutationObserver that picks up new .wow elements appended to the DOM after init() runs.