Testimonial Marquee

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Testimonial Marquee — Free Website Section Template

Testimonials · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryTestimonials
Tagstestimonialsmarqueeinfinite scrollreviewsanimatedsocial proofdark
Updated October 20, 2026

What's included

Features

Two rows of review cards scrolling in opposite directions
Seamless GSAP loop with no jumps or gaps
Hover or focus a row to ease it to a stop
Soft edge fades with a CSS mask
Duplicates hidden from screen readers
Reduced motion: no animation, rows scroll by hand
Two editable lists of up to 10 reviews; bottom row optional
Export HTML, a ZIP, React or Vue with the marquee included

About this section

Testimonial Marquee — Free Infinite Scrolling Reviews Section

Testimonial Marquee: Two rows of testimonial cards that scroll endlessly in opposite directions under a centred heading, with soft fades at both edges. Hovering a row eases it to a stop so visitors can read; it loops seamlessly with GSAP and becomes a hand-scrollable row for people who prefer reduced motion.

Testimonial Marquee fills a section with movement: two rows of review cards glide endlessly in opposite directions under a centred heading, with soft fades at both edges. It's the eye-catching social proof you see on creator tools and AI product launches, and it shows a lot of reviews without asking visitors to do anything.

Seamless, readable loop

The script duplicates each row once and loops it with GSAP at a steady pixels-per-second speed, so there's never a jump or a gap. Hover over a row (or tab into it) and it eases smoothly to a stop so the quote can be read, then picks up again when you move away. Each row runs on its own.

Accessible by design

The duplicated cards are hidden from screen readers, so every review is read once. For people who prefer reduced motion, or if GSAP doesn't load, there's no animation at all: each row becomes a normal horizontal list they can scroll by hand.

Two editable rows

Each row is its own list of up to ten reviews with a quote, name, role, photo and optional stars. Switch the bottom row off for a single marquee. The dark theme with a pink accent is easy to recolour with any preset or your brand kit.

Export it

Download HTML or a ZIP, copy a React or Vue component, or fork it into My Code. For a static layout, see the Testimonial Wall.

Why use it

Why Use the Testimonial Marquee

∞
Lots of proof, no effort
Visitors see a stream of reviews without clicking or scrolling sideways.
✦
Adds life to the page
Gentle, constant movement makes a page feel active and popular, especially on launches.
⏸
Stops when you read
Hover-to-pause and the reduced-motion fallback keep it readable and respectful.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, top row and bottom row in the panel. Switch the bottom row on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🎬
Creator tool homepage
Show what creators say about your app in two moving rows between the hero and the pricing.
🚀
Product Hunt style launch
Pull quotes from launch-day comments and run them as a marquee to show momentum and excitement.
🎓
Course sales page
Fill the page with short student wins, such as "landed a job in 3 months", scrolling past in two rows.
🧩
Community or Discord server
Show member shout-outs as a lively marquee on the community’s join page.

Got questions?

Frequently Asked Questions

The script clones each row’s cards once, then GSAP moves the row by exactly half its width on repeat. Because the second half is an identical copy, the end lines up with the start and the loop never jumps.

Yes. Hovering or focusing a row eases its speed to zero with GSAP, and moving away eases it back. Each row stops on its own.

If the visitor prefers reduced motion (or GSAP fails to load), nothing animates and no clones are made; each row becomes a horizontally scrollable list.

In exported code, set data-speed on each track (pixels per second; the defaults are 38 and 32). Lower numbers scroll more slowly.

It saves an editable copy of your Testimonial Marquee in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.