GSAP Animated Tabs Section with Sliding Pill Indicator
Overview
An animated tabs section for React and Next.js. A black pill stretches as it travels between tabs, its label changes colour exactly where the pill covers it, and each panel wipes in while the section eases to its new height.
The pill's leading edge runs ahead and its trailing edge catches up, so it stretches on the way and settles on the new tab. It isn't a separate shape under the labels. It's a second copy of the labels in the pill's colours, clipped to the pill, so a label flips colour letter by letter as the pill crosses it.
Details
- Category
- Features
- Interaction
- On Click
- Trigger
- On Click
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 088 / Testimonials
GSAP Testimonials Section with Auto-Advancing Quotes
On Load · On Click · On Hover · On Scroll
No. 086 / Features
GSAP Sticky Scroll Features Section with Image Wipes
On Scroll · On Click
No. 087 / Team
GSAP Team Section with Names That Reveal Portraits
On Hover · On Click · On Scroll
(02)FAQ
GSAP Animated Tabs Section with Sliding Pill Indicator — FAQ
01What goes in each tab?
Pass tabs with a label, title, body, image and alt. points adds a short list, and aspect sets the photo's ratio from the md breakpoint up, so panels can be different heights.
02Do the tabs change by themselves?
No. They only change when someone picks one, so nothing moves while people are reading.
03Can I open a different tab first?
Yes, set defaultTab to its index. It counts from 0.
04What does it need from my page?
npm install gsap @gsap/react, Tailwind CSS v4 and next/image. Text colour and font come from your page; the demo uses Instrument Sans.
05What happens with reduced motion?
The pill and panels switch instantly, with no wipe or height animation. Keyboard control works the same.