Built for Motion
Log in

GSAP Project Index Hover Preview

proOn HoverMouse Move
Open full screen
Loading preview

Overview

A project index with a floating image preview that follows the cursor, crossfades between rows and tilts with the speed of the pointer, while the other rows dim.

The preview follows the cursor through gsap.quickTo and leans with the pointer's speed, then straightens up a moment after you stop. Rows with an href render as real links.

Details

Category
Gallery
Interaction
On Hover + Mouse Move
Trigger
On Hover
Languages
React, TypeScript, Tailwind
Tech
GSAPuseGSAPgsap.delayedCallgsap.quickTo

(01)Keep exploring

All 8 components

Built with the same techniques

GSAP Magnetic Button Hover Effect animation preview
Live preview

No. 001 / Buttons

GSAP Magnetic Button Hover Effect

free

Mouse Move · On Hover

GSAP Cursor Image Trail Hero animation preview
Live preview

No. 007 / Cursor

GSAP Cursor Image Trail Hero

pro

Mouse Move

GSAP Sticky Stacking Cards Scroll animation preview
Live preview

No. 006 / Scroll

GSAP Sticky Stacking Cards Scroll

pro

On Scroll

(02)FAQ

GSAP Project Index Hover Preview — FAQ

01What happens on touch screens?

There's no hover there, so it works as a plain, tappable list.

02Can the preview be a video?

The previews are plain <img> tags; swap them for <video autoPlay muted loop> in the file.