GSAP FAQ Accordion Section with Smooth Height Animation
Overview
A FAQ section for React and Next.js: rows open to their exact height, answers rise line by line, and a colour sweep follows the cursor in from the edge it crossed. A large numeral rolls to the open question.
One row is open at a time. GSAP tweens each panel to height: auto, so answers of any length open smoothly without measuring anything by hand. The heading stays sticky on the left beside a numeral that rolls to the open row.
Details
- Category
- FAQ
- Interaction
- On Click + On Hover + On Scroll
- Trigger
- On Click
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 031 / Scroll
GSAP Scroll Service Shutters with Sticky Panels
On Scroll · On Click
No. 088 / Testimonials
GSAP Testimonials Section with Auto-Advancing Quotes
On Load · On Click · On Hover · On Scroll
No. 048 / CTA
GSAP Call to Action Section with Hover Colour Flood
On Hover · On Click · On Scroll
(02)FAQ
GSAP FAQ Accordion Section with Smooth Height Animation — FAQ
01Can an answer contain links or several paragraphs?
Yes. Pass a string or your own JSX as a. Paragraphs and list items rise line by line, and anything else simply appears as the row opens.
02Can all the rows start closed?
Yes. Pass defaultOpen={null}, and the numeral starts on 00.
03Will it shift ScrollTrigger animations further down the page?
It calls ScrollTrigger.refresh() once a row finishes opening or closing, so triggers below it stay in the right place.
04Which fonts does it use?
Questions and the heading use Instrument Serif: load it with next/font as the --font-instrument-serif variable, as the demo does. It falls back to Georgia. Answers use your page's sans.
05What happens with reduced motion?
Rows open and close instantly, the numeral jumps instead of rolling, and the entrance animations are skipped.