Back to Gallery
Magnetic Cursor Effect
£5 Standard License Unlimited projects
Elements attract or repel from the cursor with elastic physics. Perfect for buttons, navigation items, and CTAs on award-winning sites.
About This Effect
An elastic magnetic attraction effect that makes elements respond to cursor proximity. Elements gently pull toward the mouse when it enters their magnetic field, creating a tactile, physics-based interaction. The strength, radius, and easing are all configurable per element. Used extensively on award-winning agency websites for buttons, navigation items, and interactive CTAs.
What's Included
- Configurable magnetic radius and attraction strength
- Elastic easing that snaps elements back naturally
- Works on any HTML element — buttons, links, images, cards
- Per-element configuration via data attributes
- Separate inner content movement for layered depth effects
- Live magnetic-energy CSS variable for halos and borders
- Elastic tap feedback for coarse-pointer devices
- Pure GSAP implementation — no additional libraries
- Keyboard focus and reduced-motion support
Perfect For
- Interactive navigation menus and menu items
- Call-to-action buttons with magnetic pull
- Image galleries with hover attraction effects
- Custom cursor interactions on portfolio sites
- Interactive pricing cards and feature highlights
How It Works
Pointer position is measured against each element's cached resting bounds. Inside the configured radius, a smoothstep falloff drives GSAP quickTo setters for translation, rotation, optional reverse inner parallax, and a --magnetic-energy CSS variable. Attract and repel modes flip the direction vector; leaving the field returns every response channel through the selected smooth, snappy, or elastic ease.
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
