Interactive Team Section
What it does
A row of small monochrome team thumbnails sits above a giant clip-masked headline. Hovering a thumbnail scales it up (power4.out) while GSAP slides that member's name into view, animating the SplitText characters vertically with a center-out stagger; hovering the whole row reveals the default 'Nine of us' title.
How it's built
| Category | hover |
|---|---|
| Tech | gsap |
| GSAP plugins | SplitText |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | desktop-first |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Interactive Team Section — hover thumbnails reveal giant staggered names
## Goal
Build a full-viewport "meet the team" section: a centered row of 9 small square portrait thumbnails sits above a giant clip-masked headline area. Hovering a thumbnail smoothly enlarges it (70px → 140px) while that member's name slides up into view as huge red condensed type, animated character-by-character with a center-out SplitText stagger. When the cursor enters the row at all, a default title ("The Squad") animates in the same way in an off-white color; leaving the row hides it again.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugin `SplitText` (`import { SplitText } from "gsap/SplitText"`, then `gsap.registerPlugin(SplitText)`). No other libraries, no smooth-scroll.
## Layout / HTML
```
<section class="team">
<div class="profile-images">
<div class="img"><img src="..." alt="" /></div> <!-- x9 -->
</div>
<div class="profile-names">
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.