# Momentum Based Hover (Inertia) > Hover elements that glide with pointer velocity and inertia — physics-feel UI for images and interactive tiles. **Definition:** Momentum Based Hover (Inertia) is a hover UI animation from collections.html. It is built with HTML, CSS, JavaScript, and GSAP, ships with a live preview, and is free to copy into personal and commercial projects. ## Facts - Category: Hover - Stack: HTML, CSS, JavaScript, and GSAP - Added: 2026-08-04 - Canonical page: https://html.bosconvertpro.com/collection/momentum-based-hover-inertia - Full-page preview: https://html.bosconvertpro.com/collection/momentum-based-hover-inertia/full - Live demo: https://html.bosconvertpro.com/demos/momentum-based-hover-inertia/index.html - Markdown mirror: https://html.bosconvertpro.com/collection/momentum-based-hover-inertia/index.md - License: https://html.bosconvertpro.com/terms ## How to use 1. Open https://html.bosconvertpro.com/collection/momentum-based-hover-inertia/full to preview the animation in full screen. 2. Copy index.html, styles.css, and script.js from the code tabs on https://html.bosconvertpro.com/collection/momentum-based-hover-inertia. 3. Paste the files into your project and adjust timing, easing, and content as needed. ## FAQ ### What is Momentum Based Hover (Inertia)? Momentum Based Hover (Inertia) is a hover UI animation from collections.html. Hover elements that glide with pointer velocity and inertia — physics-feel UI for images and interactive tiles. ### What is Momentum Based Hover (Inertia) built with? Momentum Based Hover (Inertia) is built with HTML, CSS, JavaScript, and GSAP. The source for every file is shown on the animation page and can be copied straight into your project. ### How do I use Momentum Based Hover (Inertia) in my project? Open the animation page (https://html.bosconvertpro.com/collection/momentum-based-hover-inertia), preview it live, then copy index.html, styles.css, and script.js from the code tabs. Paste the files into your project and adjust timing, easing, and content as needed. A standalone demo runs at https://html.bosconvertpro.com/demos/momentum-based-hover-inertia/index.html. ### Is Momentum Based Hover (Inertia) free to use? Yes. The Momentum Based Hover (Inertia) demo code may be used in personal and commercial projects. You may not resell or redistribute the collection itself as a competing template pack. Full terms: https://html.bosconvertpro.com/terms. ## Source — index.html ````html Momentum Based Hover (Inertia)
Jess, Co-Founder

Jess

Co-Founder

Edward, Finance

Edward

Finance

Mel, Product Designer

Mel

Product Designer

Steve, Marketing & Support

Steve

Marketing & Support

```` ## Source — styles.css ````css *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100svh; font-family: "Inter", system-ui, -apple-system, sans-serif; background: linear-gradient(160deg, #f7f4ef 0%, #f0ebe3 45%, #e8e4dc 100%); color: #1a1a1a; overflow-x: hidden; } .team-section { display: flex; justify-content: center; align-items: center; min-height: 100svh; padding: 7.5em 0; } .team-section__inner { flex: 1; max-width: 80em; padding: 0 3em; } .team-section__grid { display: flex; flex-wrap: wrap; gap: 2em; height: 100%; } .team-section__cell { position: relative; width: calc(25% - 1.5em); } .team-card__shell { position: relative; width: 100%; } .team-card { position: relative; width: 100%; overflow: hidden; border-radius: 1.5em; color: #fff; will-change: transform; box-shadow: 0 4px 24px rgba(40, 30, 20, 0.06), 0 12px 40px rgba(40, 30, 20, 0.08); } .team-card__ratio { pointer-events: none; padding-top: 150%; } .team-card__image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; -webkit-user-drag: none; } .team-card__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5em; width: 100%; height: 100%; padding: 2em; background: linear-gradient( to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 40%, transparent 70% ); } .team-card__name-row { display: flex; justify-content: flex-start; align-items: center; gap: 0.25em; } .team-card__name { margin: 0 0 0.0625em; font-size: 1.5em; font-weight: 500; line-height: 1; } .team-card__badge-icon { width: 1.5em; height: 1.5em; flex-shrink: 0; } .team-card__role { margin: 0; opacity: 0.67; font-size: 1em; font-weight: 400; line-height: 1; } @media screen and (max-width: 991px) { .team-section__cell { width: calc(50% - 1em); } } @media screen and (max-width: 767px) { .team-section { padding: 4em 0; } .team-section__inner { padding: 0 1.5em; } .team-section__cell { width: 100%; } .team-card__content { padding: 1.5em; } } ```` ## Source — script.js ````javascript gsap.registerPlugin(InertiaPlugin); function initMomentumBasedHover() { if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) { return; } const xyMultiplier = 30; const rotationMultiplier = 20; const inertiaResistance = 200; const clampXY = gsap.utils.clamp(-1080, 1080); const clampRot = gsap.utils.clamp(-60, 60); document.querySelectorAll("[data-momentum-hover]").forEach((root) => { let prevX = 0; let prevY = 0; let velX = 0; let velY = 0; let rafId = null; root.addEventListener("mousemove", (e) => { if (rafId) return; rafId = requestAnimationFrame(() => { velX = e.clientX - prevX; velY = e.clientY - prevY; prevX = e.clientX; prevY = e.clientY; rafId = null; }); }); root.querySelectorAll("[data-momentum-element]").forEach((el) => { el.addEventListener("mouseenter", (e) => { const target = el.querySelector("[data-momentum-target]"); if (!target) return; const { left, top, width, height } = target.getBoundingClientRect(); const centerX = left + width / 2; const centerY = top + height / 2; const offsetX = e.clientX - centerX; const offsetY = e.clientY - centerY; const rawTorque = offsetX * velY - offsetY * velX; const leverDist = Math.hypot(offsetX, offsetY) || 1; const angularForce = rawTorque / leverDist; const velocityX = clampXY(velX * xyMultiplier); const velocityY = clampXY(velY * xyMultiplier); const rotationVelocity = clampRot(angularForce * rotationMultiplier); gsap.to(target, { inertia: { x: { velocity: velocityX, end: 0 }, y: { velocity: velocityY, end: 0 }, rotation: { velocity: rotationVelocity, end: 0 }, resistance: inertiaResistance, }, }); }); }); }); } document.addEventListener("DOMContentLoaded", () => { initMomentumBasedHover(); }); ````