Hover effect

Interactive Team Section

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: GSAP
Trigger: hover
Duration: 0.25–0.75s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power4
Complexity: 2/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, SplitText

hover a portrait: the 70px tile grows to 140px (0.5s power4.out) while that person's giant name slides up behind an overflow mask, letters staggered 0.025s from the center out (0.75s power4.out); leaving the strip slides the default title back down

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev14,886 charsCustomize

# Interactive Team Section — hover thumbnails reveal giant staggered names

## Goal

Build a full-viewport "meet the team" section: a centered row of 9 small sq…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.