Image trail

<!-- Page settings → Before </body> tag --> <script> document.addEventListener("DOMContentLoaded", () => { // A trail on a touch device is a trail that never appears. Leave early. if (!matchMedia("(hover: hover) and (pointer: fine)").matches) return; if (matchMedia("(prefers-reduced-motion: reduce)").matches) return; const stage = document.querySelector(".trail_stage"); const imgs = gsap.utils.toArray(".trail_img"); const THRESHOLD = 92; // px of travel between frames let index = 0, z = 1, lastX = 0, lastY = 0, primed = false; function emit(x, y, angle) { const el = imgs[index++ % imgs.length]; // recycle by index z++; // Kill FIRST. A recycled element may still be fading out from its last // life, and two tweens on one node is how a trail starts flickering. gsap.killTweensOf(el); gsap.set(el, { x, y, zIndex: z, // newest always on top opacity: 1, scale: 0.72, rotate: gsap.utils.clamp(-16, 16, angle * 0.22) // lean into the gesture }); gsap.to(el, { scale: 1, duration: 0.5, ease: "expo.out" }); gsap.to(el, { opacity: 0, scale: 0.9, duration: 0.55, delay: 0.42, ease: "power2.in" }); } stage.addEventListener("mousemove", e => { const r = stage.getBoundingClientRect(); const x = e.clientX - r.left; // stage-relative, so the const y = e.clientY - r.top; // section can live anywhere if (!primed) { primed = true; lastX = x; lastY = y; return; } const dx = x - lastX, dy = y - lastY; // Distance, not events. This is what makes the trail describe the gesture // instead of describing your browser's event rate. if (Math.hypot(dx, dy) < THRESHOLD) return; lastX = x; lastY = y; emit(x, y, Math.atan2(dy, dx) * 180 / Math.PI); }); // Re-entering somewhere else must not emit a frame along the way. stage.addEventListener("mouseleave", () => primed = false); }); </script>