GSAP Testimonials Section with Auto-Advancing Quotes
Overview
A testimonials section for React and Next.js: large quotes rise line by line while photos wipe over each other, driven by progress bars that advance on their own and hold still when someone is reading.
The current quote slips up behind its line masks as the next one rises, and a new photo wipes up over the old one while it settles from a slight zoom. All the quotes share one grid cell, so the section keeps the height of the longest and nothing below it jumps.
Details
- Category
- Testimonials
- Interaction
- On Load + On Click + On Hover + On Scroll
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 029 / Hero
GSAP Magazine Cover Hero with Cut-Out Models and Variable Type
On Load · Mouse Move · On Click · On Scroll
No. 048 / CTA
GSAP Call to Action Section with Hover Colour Flood
On Hover · On Click · On Scroll
No. 028 / Gallery
GSAP Horizontal Scroll Gallery with Lenis and Fullscreen Project View
On Scroll · Mouse Move · On Hover · On Click
(02)FAQ
GSAP Testimonials Section with Auto-Advancing Quotes — FAQ
01How many testimonials work best?
Three to five. The tabs share one row, so with more than that the names get truncated on phones.
02Do I need portraits?
No. Image takes any photo, and the demo uses shots of the work instead of faces. Square-ish crops hold up best, since the frame is 4:5 on desktop and wide on phones.
03Can I change how long each quote stays?
Pass duration in seconds. Seven is the default. Longer quotes deserve more.
04What's it need from my page?
npm install gsap @gsap/react. It uses next/image, and Instrument Serif through next/font as the --font-instrument-serif variable, falling back to Georgia. Set background and text colours on the parent.
05What happens with reduced motion?
It never advances on its own. Choosing a name swaps the quote and photo instantly, and the pause button is hidden because there's nothing to pause.