GSAP Hover Effects
Mouse-driven animations that activate on hover, creating responsive feedback and visual intrigue. Morphing shapes, distortion effects, and smooth layout transitions powered by GSAP.
Unlock everything for £39
All 89 premium effects and templates, plus every future effect and template we release. That's £0.43 per item.
Buy individually now: up to £10 comes off the Vault later
Designing Hover Interactions with GSAP
Hover effects provide immediate visual feedback when users interact with elements. A button that subtly scales, a card that reveals hidden content, or a shape that morphs on mouseenter: these interactions signal that elements are interactive and reward exploration.
GSAP makes hover animations smooth by handling the transition between states with proper easing and interpolation. Unlike CSS hover transitions that snap to a new state on fast mouse movements, GSAP animations complete gracefully even if the cursor leaves mid-transition.
The best hover effects serve a functional purpose. A liquid morph on a button draws attention to a call-to-action. Text distortion on a navigation link adds personality to wayfinding. Layout morphs with GSAP Flip provide spatial continuity when content rearranges.
These effects include both the mouseenter and mouseleave animations, ensuring elements return to their original state smoothly. They handle rapid hover/unhover cycles without animation conflicts using GSAP's overwrite modes.
Touch devices receive alternative interactions since hover is not available. Some effects trigger on tap, while others use scroll-based activation. The visual result adapts to the input method without losing the design intent.
How to make a magnetic hover button with GSAP
Pull an element toward the pointer while it hovers, then spring it back on leave. Measure the pointer offset from the element centre and tween a fraction of it.
- 01
Track the pointer
On pointermove over the element, read its bounding rect and the pointer position.
- 02
Tween a fraction of the offset
Move the element a portion (e.g. 0.4) of the distance from its centre to the pointer so the pull feels weighted.
- 03
Spring back on leave
On pointerleave, tween x and y back to 0 with an elastic ease for a natural release.
import gsap from "gsap";
const btn = document.querySelector(".magnetic");
btn.addEventListener("pointermove", (e) => {
const r = btn.getBoundingClientRect();
gsap.to(btn, {
x: (e.clientX - (r.left + r.width / 2)) * 0.4,
y: (e.clientY - (r.top + r.height / 2)) * 0.4,
duration: 0.4,
ease: "power3.out",
});
});
btn.addEventListener("pointerleave", () => {
gsap.to(btn, { x: 0, y: 0, duration: 0.5, ease: "elastic.out(1, 0.3)" });
});Hover Interactions at a glance
| Effect | What it does | Built with | Difficulty |
|---|---|---|---|
| Liquid Morph Gallery | Images and headlines dissolve into viscous liquid on hover, then reform. | ScrollTrigger, PixiJS, svg-filters | advanced |
| SVG Blob Morph | Organic blob masks that morph between shapes with MorphSVGPlugin. | MorphSVG, morphing | intermediate |
| Text Hover Distortion | Characters react to cursor proximity with push, pull, wave, or rotation effects. | text-animation | advanced |
| Cursor Trail Effect | A portable editorial cursor with dot-and-ring lag, velocity afterimages, elastic target labels, color morphs, and touch previews. | cursor-effects | intermediate |
| FLIP Layout Morph | Shared-element layout transitions powered by GSAP Flip, with a premium grid-to-detail archive showcase plus reusable lightbox and filter APIs. | Flip, flip-layout | intermediate |
| Canvas Shape Vortex | Luminous 3D canvas shapes spiral through a depth tunnel that bends and blooms with fast pointer movement—no WebGL required. | canvas | advanced |
| Hover Image Trail | Velocity-aware editorial image trail with layered card drift, directional tilt, staggered decay, and static touch previews. | cursor-effects | intermediate |
| Hover Underline | Three material link underlines—an exit-through line, marker sweep, and hand-drawn wave—with coordinated type and active-index responses. | hover-effect | beginner |
| Grid Shockwave | An interactive tile wall where every click detonates a radial shockwave: tiles pop, flash, and tip away from the epicentre in a distance-staggered ring wave, then settle with elastic overshoot. | grid-animation | intermediate |
| Liquid Ripple Image | A liquid image hover effect: dragging the cursor over an image distorts the pixels like water, rippling from the pointer and settling back to a crisp, calm pool. | svg-filters | intermediate |
| Cursor Spotlight Mask | A soft aperture follows the cursor and reveals a completely different layer hidden under the visible one, stretching into a lens streak on the axis of movement and springing back with an elastic settle. | mask-reveal | advanced |
| Velocity Slice Image | A velocity-reactive image effect that peels one photograph into alternating horizontal slats with directional depth, warm edge light, and a zipper-like settle. | velocity-reactive | intermediate |
| Physics Word Pile | Display-type chips that fall, collide, tumble and stack under a real rigid body solver, with drag-and-fling throwing. | physics | advanced |
| Sticker Peel | Drag a sticker's corner and it peels back along a real moving fold, then rips clean off the sheet with your release velocity. | draggable | advanced |
| Holo Foil Card | Trading-card holographic tilt: one pointer drives 3D rotation, an iridescent foil sheen, twinkling glitter, depth parallax and a specular bloom, then settles elastically. | 3d-transforms | advanced |
| Curtain Menu Overlay | A fullscreen nav overlay that arrives as layered clip-path curtains, oversized type masking up on a stagger, and a preview plate that wipes in the direction you moved. | clip-path | advanced |
Related Guides
Custom Cursor Effects for WordPress
Build a custom cursor follower for WordPress using GSAP. No plugins needed, just clean JavaScript with smooth magnetic and trail effects.
Read guide
GSAP vs Anime.js vs Motion Compared
A practical comparison of GSAP, Anime.js, and Motion. Same animations built in each library, with bundle sizes, features, and a decision framework.
Read guideFrequently Asked Questions
How do hover effects work on touch devices?
Touch devices do not support true hover interactions. These effects detect the input type and provide alternative triggers on mobile: some activate on tap, others use scroll position, and some disable gracefully while keeping the content fully accessible.
Can I add hover effects to existing buttons and links?
Yes. These effects are designed to enhance existing HTML elements. You add a data attribute or class to your button or link, include the effect script, and the hover animation is applied automatically. No structural HTML changes needed.
What is GSAP Flip for layout animations?
GSAP Flip records an element's position and size, lets you make DOM changes (like moving it to a new container), then animates smoothly from the old state to the new state. It handles layout transitions that would otherwise cause jarring jumps.
How do I prevent hover animations from interfering with each other?
GSAP's overwrite modes prevent animation conflicts. When a new hover animation starts, it automatically kills conflicting tweens on the same element. Use overwrite: "auto" (the default) or manage timelines explicitly for complex sequences.