# Hover Image Trail > Velocity-aware editorial image trail with layered card drift, directional tilt, staggered decay, and static touch previews. Pure GSAP core. Canonical: https://gsapvault.com/effects/hover-image-trail Live demo: https://gsapvault.com/demos/hover-image-trail/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | cursor-effects, hover-effect, image-trail, micro-interaction | | Uses Lenis | No | ## Overview 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. ## Features - 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 ## Use Cases - 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before closing ``:** ```html ``` **3. Add the effect to your ``:** ```html

``` The container is the trail's positioning context. Each `.trail-item` supplies its own image cycle. On coarse pointers, the script creates one representative `.trail-item__preview` per row when the markup does not already include one. ### Options Set options on the `[data-image-trail]` container: | Attribute | Values | Default | Description | |---|---:|---:|---| | `data-trail-images` | JSON array of URLs | — | Container-level fallback image list | | `data-trail-threshold` | Pixels | `82` | Travel distance between card spawns | | `data-trail-lifetime` | Milliseconds | `620` | Delay before each card settles out | | `data-trail-size` | Pixels | `224` | Floating card width; CSS supplies the 4:3 ratio | | `data-trail-max` | Integer | `9` | Maximum pooled floating cards | `data-trail-images` also works on an individual `.trail-item` and takes priority over child images. ### Accessibility - **Keyboard:** use links or buttons for `.trail-item`; focus shows the row's first image and mirrors the active typography state. - **Reduced motion:** the moving trail is disabled. Fine-pointer hover and keyboard focus use one static card with no animated travel. - **Touch:** every row keeps a representative image visible. Tapping or focusing the row activates its typography and accent treatment. - **Screen readers:** generated and decorative previews use empty alt text and `aria-hidden="true"`; project names remain the accessible content. - **No JavaScript:** all row text remains visible, and authored `.trail-item__preview` images remain visible on mobile. ### Dependencies - GSAP 3.12+ core (GSAP 3.14.2 CDN shown above) - No GSAP plugins required - No smooth-scroll library required ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Hover Image Trail](https://gsapvault.com/effects/hover-image-trail) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Three material link underlines (an exit-through line, marker sweep, and hand-drawn wave) with coordinated type and active-index responses. - [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal.md): A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its editorial caption lands. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt