Animation Library

Hover Preview Strip

Hover or focus a row to reveal a masked preview panel that follows your pointer; images swap via a vertical strip translate.

HoverGSAPPreviewList
Asset previewStage · 16 : 10
Web · React + GSAPLive
hover · previewmasked strip
01 · About

A portfolio-style list where each row drives a preview panel.

A portfolio-style list where each row drives a preview panel. The panel fades in on hover/focus, follows pointer Y, and cross-swaps imagery by shifting a stacked strip inside a mask.

Designed for work listings and galleries where navigation should feel tactile but stay lightweight (no heavy canvas).

02 · Metadata
Status
Production ready
Category
Hover
Engine
GSAP
Platforms
Web
Last updated
May 2026· v1.0.0
03 · Technical notes
Implementation

Uses GSAP quickTo for buttery pointer-follow (y translate) and tweens for strip translate + fade.

Reduced motion keeps transitions near-instant and removes pointer-following.

Replace `/public/animations/hover-preview-strip/preview.mp4` when you capture a branded recording — current file is a temporary placeholder.

04 · Use cases

  • Portfolio and project lists

    Preview work in-context without leaving the list.

  • Product collections

    Hover previews for SKUs, templates, or themes.