YARD Hover Menu
What it does
A large uppercase project list where hovering a menu item swaps its label lines via GSAP top-position tweens and reveals a stacked image preview that follows the cursor. The preview images grow in and out with an animated clip-path polygon on a power3.out ease, while the trailing cursor position is smoothed with a gsap.to on mousemove.
How it's built
| Category | hover |
|---|---|
| Tech | gsap |
| 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.
# Editorial Hover Menu — text roll-swap rows + cursor-trailing stacked clip-path image preview
## Goal
Build a full-width list of large uppercase project rows. Hovering the whole list dims every row's text to grey; hovering an individual row **rolls its text upward and swaps in an identical black duplicate line** (the active row snaps to black, the rest stay grey). At the same time a small **stacked image-preview card follows the cursor with lag** and the hovered row's thumbnail **wipes into view from the bottom via an animated `clip-path` polygon**. Leaving the list wipes all previews upward and out. Everything is hover/mousemove-driven — no scroll, no click, no autoplay.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) only — **no GSAP plugins**, no ScrollTrigger, no smooth-scroll library. Single import: `import gsap from "gsap";`. All logic runs inside a `DOMContentLoaded` listener.
## Layout / HTML
```
<body>
<div class="container">
<div class="preview">
<div class="preview-img preview-img-1"></div>
<div class="preview-img preview-img-2"></div>
…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.