Back to Gallery
Hover Image Trail
£5 Standard License Unlimited projects
Velocity-aware editorial image trail with layered card drift, directional tilt, staggered decay, and static touch previews. Pure GSAP core.
About This Effect
A physical editorial image-trail effect that turns fast pointer sweeps into layered fans of visual cards. Pointer velocity drives each card's travel, tilt, and scale while a reusable pool keeps the DOM bounded; keyboard and touch users receive clear static previews instead.
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
- Accessible fallbacks: visible touch previews plus a static focus/reduced-motion 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 measures distance and elapsed time, interpolating spawn points along fast sweeps so a single event can still build a layered fan. GSAP timelines map velocity to drift, tilt, and scale, then fade and shrink cards in spawn order after the configured lifetime.
Images come from a fixed pool of absolutely positioned elements reused round-robin, with gsap.killTweensOf handling interruption cleanly.
gsap.matchMedia enables motion only for fine pointers without reduced motion. Keyboard focus uses one static card, while coarse pointers retain or generate one visible representative preview per row.
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
