# GSAP Hover Effects

> Interactive GSAP hover animations. Liquid morphs, text distortion, cursor trails, and layout transitions for engaging user experiences.

Canonical: https://gsapvault.com/categories/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.

## 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.

1. **Track the pointer:** On pointermove over the element, read its bounding rect and the pointer position.
2. **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.
3. **Spring back on leave:** On pointerleave, tween x and y back to 0 with an elastic ease for a natural release.

```js
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](https://gsapvault.com/effects/liquid-morph) | Images and headlines dissolve into viscous liquid on hover, then reform. | ScrollTrigger, PixiJS, svg-filters | advanced |
| [SVG Blob Morph](https://gsapvault.com/effects/svg-blob-morph) | Organic blob masks that morph between shapes with MorphSVGPlugin. | MorphSVG, morphing | intermediate |
| [Text Hover Distortion](https://gsapvault.com/effects/text-hover-distortion) | Characters react to cursor proximity with push, pull, wave, or rotation effects. | text-animation | advanced |
| [Cursor Trail Effect](https://gsapvault.com/effects/cursor-trail) | 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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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 |

## Effects in This Category

### Liquid Morph Gallery

Images and headlines dissolve into viscous liquid on hover, then reform. SVG filters for the gallery, an optional WebGL shader for display type, and one control that melts the whole page.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/liquid-morph)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/liquid-morph.md)

### SVG Blob Morph

Organic blob masks that morph between shapes with MorphSVGPlugin. Images live inside drifting blobs that settle into a circle on hover.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/svg-blob-morph)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/svg-blob-morph.md)

### Text Hover Distortion

Characters react to cursor proximity with push, pull, wave, or rotation effects. The pointer field can be read from a whole section, and buttons anywhere on the page can switch mode live.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/text-hover-distortion)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/text-hover-distortion.md)

### Cursor Trail Effect

A portable editorial cursor with dot-and-ring lag, velocity afterimages, elastic target labels, color morphs, and touch previews.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/cursor-trail)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/cursor-trail.md)

### 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.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/flip-layout-morph)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/flip-layout-morph.md)

### Canvas Shape Vortex

Luminous 3D canvas shapes spiral through a depth tunnel that bends and blooms with fast pointer movement—no WebGL required.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/canvas-shape-vortex)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/canvas-shape-vortex.md)

### Hover Image Trail

Velocity-aware editorial image trail with layered card drift, directional tilt, staggered decay, and static touch previews. Pure GSAP core.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/hover-image-trail)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/hover-image-trail.md)

### Hover Underline

Three material link underlines—an exit-through line, marker sweep, and hand-drawn wave—with coordinated type and active-index responses.

- Tier: free · Difficulty: beginner
- [View effect](https://gsapvault.com/effects/hover-underline)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/hover-underline.md)

### 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.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/grid-shockwave)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/grid-shockwave.md)

### 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.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/liquid-ripple-image)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/liquid-ripple-image.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/cursor-spotlight-mask)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/cursor-spotlight-mask.md)

### 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.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/velocity-slice-image)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/velocity-slice-image.md)

### Physics Word Pile

Display-type chips that fall, collide, tumble and stack under a real rigid body solver, with drag-and-fling throwing.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/physics-word-pile)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/physics-word-pile.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/sticker-peel)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/sticker-peel.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/holo-foil-card)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/holo-foil-card.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/curtain-menu-overlay)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/curtain-menu-overlay.md)

## Related Tutorials

- [Custom Cursor Effects for WordPress](https://gsapvault.com/blog/custom-cursor-effects-wordpress) ([Markdown](https://gsapvault.com/blog/custom-cursor-effects-wordpress.md)): Build a custom cursor follower for WordPress using GSAP. No plugins needed, just clean JavaScript with smooth magnetic and trail effects.
- [GSAP vs Anime.js vs Motion Compared](https://gsapvault.com/blog/gsap-vs-animejs-vs-motion) ([Markdown](https://gsapvault.com/blog/gsap-vs-animejs-vs-motion.md)): A practical comparison of GSAP, Anime.js, and Motion. Same animations built in each library, with bundle sizes, features, and a decision framework.

## Frequently 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.

## Related Categories

- [GSAP Cursor Effects](https://gsapvault.com/categories/gsap-cursor-effects)
- [GSAP Text Effects](https://gsapvault.com/categories/gsap-text-effects)
- [GSAP Card Animations](https://gsapvault.com/categories/gsap-card-animations)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt