GSAP Team Section with Names That Reveal Portraits
Overview
A team section for React and Next.js built from huge serif names. Hover, focus or tap a name and that person's portrait wipes in beside it, with their role and bio, joined to the name by a thin drawn line.
The names are the design here. They fill most of the width, and the rest of the list dims while one is active. The portrait panel slides down the page to sit next to that name, and a thin line draws across to join the two. New portraits wipe in from the direction you travelled, so moving down the list feels different from moving up it.
Details
- Category
- Team
- Interaction
- On Hover + On Click + On Scroll
- Trigger
- On Hover
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 048 / CTA
GSAP Call to Action Section with Hover Colour Flood
On Hover · On Click · On Scroll
No. 086 / Features
GSAP Sticky Scroll Features Section with Image Wipes
On Scroll · On Click
No. 088 / Testimonials
GSAP Testimonials Section with Auto-Advancing Quotes
On Load · On Click · On Hover · On Scroll
(02)FAQ
GSAP Team Section with Names That Reveal Portraits — FAQ
01How do I add my team?
Pass people with a name, role and optional bio, image and link. Bios can be plain text or your own markup, and names should be unique because they're used as keys.
02What if someone doesn't have a photo yet?
Leave out image and that person gets a tile with their initials, in the accent colour or in the tone you set for them.
03Can I use cut-out portraits?
Yes. Transparent images sit on the person's tone colour. If a face ends up too low or too small, position and zoom steer the crop.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The names use a serif loaded as --font-bodoni, which you can swap for any font, and the text colour comes from your page or className.
05What happens with reduced motion?
Portraits and panels change instantly and the entrance animation is skipped. Everything still works from the mouse, the keyboard and touch.