Hover Image Trail
Award-site image trail where cursor movement spawns images that follow the pointer, scale in from the travel direction, and fade away. Pure GSAP core.
About This Effect
A signature award-site interaction: as the cursor sweeps across a section, preview images spawn at the pointer, drift in the direction of travel with a velocity-based tilt, then scale and fade away. Each row or container defines its own image set via child img elements or a data-trail-images JSON list, and the script cycles through them as new images spawn. Built on GSAP core only, it reuses a fixed pool of elements so the DOM never grows, keeping the effect smooth even during fast mouse movement.
What's Included
- Distance-threshold spawning: a new image appears after the pointer travels a configurable distance
- Velocity-aware motion: images tilt and drift in the direction the cursor is moving
- Fixed element pool with round-robin reuse: no unbounded DOM growth
- Per-row or per-container image sets via child img elements or data-trail-images JSON
- Configurable image size, spawn threshold, lifetime, and pool size via data attributes
- Keyboard support: focusing a row reveals its image statically, mirroring hover
- Reduced motion fallback swaps the trail for a simple static image reveal
- Zero plugins required: GSAP core only, works alongside any other effects
Perfect For
- Portfolio and agency project lists with per-project preview imagery
- Case study indexes where hovering a row teases the work
- E-commerce collection menus revealing product shots on hover
- Editorial article lists with trailing cover images
- Award-style landing pages that need a memorable signature interaction
How It Works
A pointermove listener on the container accumulates the distance the cursor travels; once it crosses the spawn threshold, the next image in the hovered row's cycle is placed at the pointer using gsap.set. A timeline tweens it in with power3.out, scaling up and drifting along the normalized velocity vector with a clamped rotation derived from horizontal speed, then fades and shrinks it out after the configured lifetime. Images come from a fixed pool of absolutely positioned elements that are reused round-robin, with gsap.killTweensOf and overwrite handling interrupted animations. gsap.matchMedia gates the trail to fine pointers and disables it for prefers-reduced-motion, where hover and focus fall back to a static centered reveal.