GSAP Testimonial Wall with Infinite Scrolling Columns
Overview
A wall of testimonials for React and Next.js. Columns of quotes drift up and down in a seamless loop, speed up as you scroll the page, and a column stops when your cursor rests on it so it can be read.
Neighbouring columns drift in opposite directions at slightly different speeds, so they never fall into step and no seam shows. Short quotes are set larger than long ones, which gives the wall its rhythm without you having to arrange anything. Scroll the page and the columns speed up, then ease back to their own pace.
Details
- Category
- Testimonials
- Interaction
- On Scroll + On Hover + On Load + On Click
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 026 / Studio
VYRO Painted Loud Studio
On Load · On Scroll · On Hover · Mouse Move
No. 088 / Testimonials
GSAP Testimonials Section with Auto-Advancing Quotes
On Load · On Click · On Hover · On Scroll
No. 087 / Team
GSAP Team Section with Names That Reveal Portraits
On Hover · On Click · On Scroll
(02)FAQ
GSAP Testimonial Wall with Infinite Scrolling Columns — FAQ
01How do I add my quotes?
Pass items with a quote, a name and an optional role. Quotes are dealt across the columns in order, and the component repeats them as often as it needs to fill the wall.
02How many columns will it show?
Three by default on a wide screen, or whatever you set with columns. Tablets show at most two and phones show one.
03Can I change the speed and the height?
Yes. speed is in pixels per second, and height takes any CSS length, such as 80svh.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The quotes use a serif loaded as --font-newsreader, which you can swap for any font. The card colours are props.
05What happens with reduced motion?
Nothing moves. The fixed height comes off and every quote is laid out once, so the whole section can be read by scrolling the page.