Magnetic Cursor Effect
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
- Smooth disable/enable for responsive breakpoints
- Pure GSAP implementation — no additional libraries
- Desktop-focused, gracefully disabled on touch devices
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
Mouse position is tracked relative to each magnetic element's bounding box. When the cursor enters the magnetic radius, GSAP calculates the offset and applies a proportional transform. The attraction strength determines how far the element follows the cursor. On mouse leave, elastic easing returns the element smoothly to its original position.