GSAP Hover and Cursor Effects

Pointer-driven animations that respond to hover, mouse position, movement speed and drag. Magnetic attraction, particle trails, morphing shapes, cards you can throw and smooth layout transitions, all powered by GSAP.

40 effects, 3 free, no build step

Effects Pass

£50

Every current and future premium effect. Includes 99 items now, plus every future release in this line.

The Vault

£99

All 236 premium items in the Vault library, plus future additions to the library.

101 New £5

Room 101

Drag, throw or press the web's pet hates into Room 101: a heavy door eases ajar as they near it, pulls them into the dark and slams shut with a rattle.

DraggableInertiaPlugin

100 New £5

Inflatable Type

A headline of glossy, air-filled 3D balloon letters on curling ribbon strings. Press one and its surface dents while the rest bulges, sweep across to knock letters into their neighbours with their strings trailing, and tap to pump a letter up until it squeaks back into place.

webgl-shaderspring-physics

099 New £5

Shadow Assembly

Drag a low spotlight freely across the floor to reshape the word or monogram cast by a suspended matte black sculpture. Release to hold its position, then choose Align light to restore the artwork.

webgl-shaderpointer-effects

097 New £5

Fogged Glass Reveal

Look through a rain-covered window into a misty forest. Wipe away soft condensation while refractive beads gather at the edges and rivulets run down the glass.

webgl-shadermask-reveal

098 New £5

Sand Reveal

Brush uneven mounds of pale sand across a graphite board, leaving fine grain trails and gathering material into shaded piles.

canvaspointer-tracking

096 New £5

Scratch Card Reveal

Scratch silver foil to reveal a photograph or discount code. Permanent tracks, directional flakes and an optional automatic finish, switched off by default.

canvastouch-gestures

074 £5

Lenticular Card

Tilt a ridged card to reveal an alpine lake from day to night, with optical interlacing, moving plastic highlights and a physical settle.

webgl-shader3d-transforms

072 £5

Lens Slider Wall

An infinite wall of sliding photographs that bow through a velocity lens and lift seamlessly into a large viewer.

webgl-shadervelocity-reactive

005 £5

Magnetic Cursor Effect

Elements attract or repel from the cursor with elastic physics. Perfect for buttons, navigation items, and CTAs on award-winning sites.

cursor-effectsphysics

017 £5

Cursor Confetti Trail

A responsive GSAP confetti trail that turns fast pointer sweeps and touch drags into colourful, directional ribbons of tumbling geometric particles.

pointer-effectstouch-drag

031 £5

Elastic Repel Headline

A cursor-repulsion display headline whose letters flee the pointer, scaled by cursor speed, then spring back home with an elastic overshoot, motion blur, and a scale dip.

hover-effecttext-animation

006 £5

Liquid Morph Hover Effect

A GSAP liquid morph hover effect: images and headlines melt into viscous liquid, then reform. SVG filters, an optional WebGL shader, and a whole-page melt.

ScrollTriggerPixiJS

024 £5

SVG Blob Morph

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

MorphSVG morphing

009 £5

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, buttons anywhere on the page can switch mode live, and a second channel can tint or blur the characters nearest the pointer.

text-animationcursor-effects

012 £5

Cursor Trail Effect

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

cursor-effectshover-effect

014 £5

FLIP Layout Morph

Shared-element layout transitions with GSAP Flip: a grid tile travels into a detail view while its neighbours reflow into a strip, swaps with any of them in one crossing move, and returns to its exact slot.

Flip flip-layout

$Canvas Shape Vortex - A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL$

018 £5

Canvas Shape Vortex

A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL.

ScrollTrigger canvas

021 £5

Hover Image Trail

Velocity-aware image trail for a list of links: layered card drift, directional tilt, staggered decay, and static touch previews. Every card keeps its own photograph's shape. Pure GSAP core.

cursor-effectshover-effect

f06 Free

Hover Underline

Four material link underlines (an exit-through line, marker sweep, hand-drawn wave, and an endlessly travelling wave) with coordinated type and active-index responses.

hover-effectmicro-interaction

030 £5

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-animationstagger

032 £5

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-filtershover-effect

035 £5

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-revealmouse-follow

037 £5

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-reactiveimage-slicing

038 £5

Physics Word Pile

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

physicscollision

039 £5

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.

draggableclip-path

044 £5

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-transformspointer-effects

045 £5

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-pathmask-reveal

047 £5

Plucked Strings

Interactive elastic strings that bend around your cursor and twang back with damped oscillation — with an opt-in sound toggle that voices every pluck as a synthesized, guitar-tuned string note.

pointer-effectsphysics

051 £5

Interactive Halftone Image

An image rendered live as a halftone dot grid the pointer drags through: dots swell, smear along the stroke and split into misregistered ink at speed, then settle back elastically.

canvashalftone

$Magnetic Glass Lens - A glass loupe that follows the cursor and magnifies the live page beneath it, with refraction wobble, chromatic fringing and 3D tilt momentum$

052 £5

Magnetic Glass Lens

A glass loupe that follows the cursor and magnifies the live page beneath it, with refraction wobble, chromatic fringing and 3D tilt momentum.

cursor-effectsphysics

053 £5

Kinetic Shutter Blinds

Slices a hero design across a bank of 3D venetian louvres that crack open under the cursor in a proximity wave, revealing a second layer behind and a third printed on their reverse.

Observer 3d-transforms

055 £5

Elastic Photo Mesh

Interactive rubberized photo mesh: click, drag, or sweep across any image to stretch and warp the canvas texture with spring-mass physics, elastic tension, and gelatin reverberations.

canvasmesh-distortion

069 £5

Funhouse Portrait

Inflate noses, squeeze faces and twist smiles with a playful three.js portrait filter that springs back on release.

webgl-shaderfisheye

f01 Free

3D Card Flip Gallery

Tactile GSAP 3D cards with deep perspective, reactive edge lighting and shifting shadows. Flip on hover, keyboard focus or tap, with grouped auto-close.

ScrollTrigger 3d-transforms

023 £5

Draggable Card Stack

Swipeable card deck powered by Draggable and InertiaPlugin. Throw the top card to send it to the back; momentum decides dismiss or spring-back, and the rest of the page follows whichever card is on top.

DraggableInertiaPlugin

046 £5

Page Turn Book

A GSAP page-turn effect with curved paper, moving highlights and momentum. Drag or flick through a lookbook, with touch and arrow-key controls.

DraggableInertiaPlugin

060 £5

Twang Lanyard

A two-leg SVG lanyard simulation that lets a weighted event pass fall, whip, twist, and settle through damped rope constraints.

rope-physicsconstraint-solver

081 New £5

Pinboard Notes

Notes and prints pinned to a cork board. Drag one and the paper hangs from its pin, swings with your movement, then presses back into the board on release. Tie notes together with string that sags and sways, and write a new note that finds its own place.

pointer-dragspring-physics

095 New £5

Interactive Swatch Book

A tactile material sample fan with a shared hinge and flexible fabric. Pull a swatch free, feel its give, then pin a shade and compare alternatives side by side.

draggablepointer-effects

086 New Free

Tailwind Component Remixer

Generate fresh Tailwind component recipes with procedural SVG artwork, coordinated colour palettes and animated GSAP layout transitions.

Flip tailwind-css

Browse all 108 effects

Designing Hover and Cursor 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.

Custom cursors take the same idea further by replacing the default pointer entirely. A magnetic button pulls toward the cursor as it approaches, a trail of particles follows mouse movement, and a confetti burst rewards a click. GSAP interpolates these positions with gsap.quickTo() rather than updating on every high-frequency mousemove event, which is what keeps them fluid at 60fps.

Touch devices receive alternative interactions since neither hover nor a persistent cursor is available. Some effects trigger on tap, others use scroll-based activation, and cursor effects detect the pointer type and disable themselves. Content and functionality are identical either way; only the visual enhancement is removed.

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.

Minimal example

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 & Cursor at a glance

Compare the 40 hover & cursor in this category by what they do, technique, and difficulty.
Effect	What it does	Built with	Difficulty
Room 101	Drag, throw or press the web's pet hates into Room 101: a heavy door eases ajar as they near it, pulls them into the dark and slams shut with a rattle.	Draggable, InertiaPlugin, draggable	advanced
Inflatable Type	A headline of glossy, air-filled 3D balloon letters on curling ribbon strings.	webgl-shader	advanced
Shadow Assembly	Drag a low spotlight freely across the floor to reshape the word or monogram cast by a suspended matte black sculpture.	webgl-shader	advanced
Fogged Glass Reveal	Look through a rain-covered window into a misty forest.	webgl-shader	advanced
Sand Reveal	Brush uneven mounds of pale sand across a graphite board, leaving fine grain trails and gathering material into shaded piles.	canvas	advanced
Scratch Card Reveal	Scratch silver foil to reveal a photograph or discount code.	canvas	intermediate
Lenticular Card	Tilt a ridged card to reveal an alpine lake from day to night, with optical interlacing, moving plastic highlights and a physical settle.	webgl-shader	advanced
Lens Slider Wall	An infinite wall of sliding photographs that bow through a velocity lens and lift seamlessly into a large viewer.	webgl-shader	advanced
Magnetic Cursor Effect	Elements attract or repel from the cursor with elastic physics.	cursor-effects	intermediate
Cursor Confetti Trail	A responsive GSAP confetti trail that turns fast pointer sweeps and touch drags into colourful, directional ribbons of tumbling geometric particles.	pointer-effects	intermediate
Elastic Repel Headline	A cursor-repulsion display headline whose letters flee the pointer, scaled by cursor speed, then spring back home with an elastic overshoot, motion blur, and a scale dip.	hover-effect	advanced
Liquid Morph Hover Effect	A GSAP liquid morph hover effect: images and headlines melt into viscous liquid, 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, colour morphs, and touch previews.	cursor-effects	intermediate
FLIP Layout Morph	Shared-element layout transitions with GSAP Flip: a grid tile travels into a detail view while its neighbours reflow into a strip, swaps with any of them in one crossing move, and returns to its exact slot.	Flip, flip-layout	intermediate
Canvas Shape Vortex	A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL.	ScrollTrigger, canvas	advanced
Hover Image Trail	Velocity-aware image trail for a list of links: layered card drift, directional tilt, staggered decay, and static touch previews.	cursor-effects	intermediate
Hover Underline	Four material link underlines (an exit-through line, marker sweep, hand-drawn wave, and an endlessly travelling 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
Plucked Strings	Interactive elastic strings that bend around your cursor and twang back with damped oscillation — with an opt-in sound toggle that voices every pluck as a synthesized, guitar-tuned string note.	pointer-effects	advanced
Interactive Halftone Image	An image rendered live as a halftone dot grid the pointer drags through: dots swell, smear along the stroke and split into misregistered ink at speed, then settle back elastically.	canvas	advanced
Magnetic Glass Lens	A glass loupe that follows the cursor and magnifies the live page beneath it, with refraction wobble, chromatic fringing and 3D tilt momentum.	cursor-effects	advanced
Kinetic Shutter Blinds	Slices a hero design across a bank of 3D venetian louvres that crack open under the cursor in a proximity wave, revealing a second layer behind and a third printed on their reverse.	Observer, 3d-transforms	intermediate
Elastic Photo Mesh	Interactive rubberized photo mesh: click, drag, or sweep across any image to stretch and warp the canvas texture with spring-mass physics, elastic tension, and gelatin reverberations.	canvas	advanced
Funhouse Portrait	Inflate noses, squeeze faces and twist smiles with a playful three.js portrait filter that springs back on release.	webgl-shader	advanced
3D Card Flip Gallery	Tactile GSAP 3D cards with deep perspective, reactive edge lighting and shifting shadows.	ScrollTrigger, 3d-transforms	intermediate
Draggable Card Stack	Swipeable card deck powered by Draggable and InertiaPlugin.	Draggable, InertiaPlugin, draggable	intermediate
Page Turn Book	A GSAP page-turn effect with curved paper, moving highlights and momentum.	Draggable, InertiaPlugin, page-turn	advanced
Twang Lanyard	A two-leg SVG lanyard simulation that lets a weighted event pass fall, whip, twist, and settle through damped rope constraints.	rope-physics	advanced
Pinboard Notes	Notes and prints pinned to a cork board.	pointer-drag	intermediate
Interactive Swatch Book	A tactile material sample fan with a shared hinge and flexible fabric.	draggable	intermediate
Tailwind Component Remixer	Generate fresh Tailwind component recipes with procedural SVG artwork, coordinated colour palettes and animated GSAP layout transitions.	Flip, tailwind-css	intermediate

Related guides

March 2, 2026

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.

March 8, 2026

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.

Frequently asked questions

How do hover and cursor effects work on touch devices?

Touch devices support neither true hover nor a persistent cursor. These effects detect the input type and provide alternative triggers on mobile: some activate on tap, others use scroll position, and custom cursors 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.

Will a custom cursor slow down my website?

Not if implemented correctly. These effects use GSAP's optimized ticker for rendering, animate only transform properties, and avoid layout recalculations. They run at 60fps on modern hardware without affecting page performance, and they clean up properly when you navigate away.

How do I customize the cursor appearance?

Each cursor effect uses standard HTML and CSS for the cursor element. You can change size, color, shape, blend mode, and opacity through CSS custom properties documented in each effect. The GSAP animation handles the motion; the CSS handles the look.

Browse all effects What GSAP effects are

GSAP Hover and Cursor Effects

Browse effects

Room 101

Inflatable Type

Shadow Assembly

Fogged Glass Reveal

Sand Reveal

Scratch Card Reveal

Lenticular Card

Lens Slider Wall

Magnetic Cursor Effect

Cursor Confetti Trail

Elastic Repel Headline

Liquid Morph Hover Effect

SVG Blob Morph

Text Hover Distortion

Cursor Trail Effect

FLIP Layout Morph

Canvas Shape Vortex

Hover Image Trail

Hover Underline

Grid Shockwave

Liquid Ripple Image

Cursor Spotlight Mask

Velocity Slice Image

Physics Word Pile

Sticker Peel

Holo Foil Card

Curtain Menu Overlay

Plucked Strings

Interactive Halftone Image

Magnetic Glass Lens

Kinetic Shutter Blinds

Elastic Photo Mesh

Funhouse Portrait

3D Card Flip Gallery

Draggable Card Stack

Page Turn Book

Twang Lanyard

Pinboard Notes

Interactive Swatch Book

Tailwind Component Remixer

Designing Hover and Cursor Interactions with GSAP

How to make a magnetic hover button with GSAP

Track the pointer

Tween a fraction of the offset

Spring back on leave

Hover & Cursor at a glance

Related guides

Custom Cursor Effects for WordPress

GSAP vs Anime.js vs Motion Compared

Frequently asked questions

Your cart