How to make a mouse image trail effect with GSAP

The technique in three decisions

When to spawn. Spawning on every pointermove floods the screen with images when the mouse is fast and leaves gaps when it is slow. Measuring the distance since the last image and spawning only past a threshold, typically 60 to 120 pixels, gives an even trail. Some designs also spawn on a timer while the mouse is still, so the effect never stops completely.

How each image lives. An image appears (scale up, a clip-path opening, a small rotation), stays for a beat, and leaves (fade, scale down, a drop). Doing both in one short timeline per image keeps the logic simple. The alternative is the batch approach: images stay until the pointer stops, then all leave together with a stagger, which reads as a deliberate gesture.

Stacking. The newest image must be on top. Increment a counter and give each spawned image the next z-index, or the trail looks shuffled when images overlap.

A minimal version

Images are created once and reused in a loop. Each one appears at the cursor, scales up, then fades away.

import gsap from "gsap";

const sources = ["/img/1.jpg", "/img/2.jpg", "/img/3.jpg", "/img/4.jpg", "/img/5.jpg", "/img/6.jpg"];
const pool = sources.map((src) => {
  const img = document.createElement("img");
  img.src = src;
  img.alt = "";
  img.className = "trail-img";
  document.body.appendChild(img);
  return img;
});

let last = { x: 0, y: 0 };
let index = 0;
let layer = 1;

addEventListener("pointermove", (e) => {
  if (Math.hypot(e.clientX - last.x, e.clientY - last.y) < 90) return;
  last = { x: e.clientX, y: e.clientY };
  const img = pool[index++ % pool.length];
  gsap.killTweensOf(img);
  gsap.set(img, {
    x: e.clientX, y: e.clientY, xPercent: -50, yPercent: -50,
    zIndex: layer++, opacity: 1, scale: 0.6,
    rotation: gsap.utils.random(-10, 10),
  });
  gsap.timeline()
    .to(img, { scale: 1, duration: 0.4, ease: "power3.out" })
    .to(img, { opacity: 0, scale: 0.85, duration: 0.5, ease: "power2.in" }, 0.6);
});

.trail-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 180px;
  pointer-events: none;
  opacity: 0;
}

killTweensOf matters when the pool is small: an image can be called back before its previous exit has finished, and without it two timelines would fight over the same element.

Where it gets hard

Pool size. If the pool is smaller than the number of images visible at once, images jump from the end of the trail to the front while still on screen. Make the pool at least as large as the trail's lifetime divided by the spawn interval, or simply use a few more images than you think.

Loading. An image that has not loaded appears as an empty box at the cursor. Preload the whole set before enabling the effect, and keep the files small: they are shown at a couple of hundred pixels wide, so large originals only waste bandwidth.

Scope. A trail over the whole page gets in the way of reading and clicking. Limit it to a hero or a section by listening on that element, and hide the trail when the pointer leaves it. Keep pointer-events: none on the images so they never block links underneath.

Touch screens. There is no hover on phones, and a trail that follows a scrolling finger feels broken. Detect a fine pointer with matchMedia("(pointer: fine)") and switch the effect off, or replace it with a tap that spawns a single image.

Reduced motion and meaning. The images are decoration, so empty alt text is correct. Turn the effect off for prefers-reduced-motion, and do not rely on the trail to show content the visitor needs.

Performance

Moving and scaling fixed elements with transforms is cheap, and a pool of ten images costs almost nothing. Performance only suffers when images are large or when each move spawns new DOM nodes; reuse is the fix for both. If you add clip-path or blur to the entrance, test on a modest laptop, since those repaint on every frame.