Magnetic Cursor Effect

Quick Start

1. Add GSAP and the effect before the closing </body> tag:

Code snippet omitted: it ships with the download.

2. Add the magnetic attribute to an interactive element:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

The effect needs nothing from your markup beyond the data-magnetic attribute on an element that can move, and it reads every setting from the data attributes below. Everything else in the demo (the studio nav, the headline, the call disc, the scroll cue) is ordinary page content styled in assets/style.css and can be deleted or replaced.

What the effect does depend on:

• [data-magnetic] must be transformable. Inline elements cannot be translated, so give links display: inline-flex (or inline-block). The demo's [data-magnetic] { position: relative; will-change: transform; } rule is the only structural CSS.
• Resting positions are measured, not tracked. The field centre is the element's layout position at init, re-measured on resize, scroll and once web fonts have loaded. If you move an element by other means (a layout change, an opened panel) call window.magneticCursor.refresh().
• data-magnetic-inner selects one descendant for the second movement layer. It is a normal querySelector inside the element, so any class of your own works; the demo's .btn__label and .hero__disc-content are demo names, not contract.
• The effect writes --magnetic-energy (0 to 1) and toggles .is-magnetic-active on each element while the pointer is inside its field. Both are optional hooks: the demo brightens a hairline ring around the disc and the border on the buttons with them. Declare --magnetic-energy: 0 on the element so its CSS has a value before the pointer arrives.
• No custom cursor is drawn. The demo uses the system pointer; if you add a custom cursor it is independent of this effect.
• Coarse pointers get real buttons. On touch devices the proximity loop never starts and each element receives a short elastic tap response instead, so every magnetic element should be a native link or button that works without the movement.

Options

CSS Requirements

Code snippet omitted: it ships with the download.

The effect writes --magnetic-energy from 0 to 1. Use it to drive rings, borders, shadows, or other visual responses. The demo's call disc sharpens a hairline ring with it:

Code snippet omitted: it ships with the download.

Accessibility and Devices

• The proximity effect runs only with a fine pointer.
• Keyboard focus mirrors activation with a directional lift and inner response.
• Coarse-pointer devices receive a short elastic tap response rather than a hover dependency.
• Reduced motion keeps every control static and fully usable.
• Use native links and buttons so activation never depends on the visual effect.

Dependencies

• GSAP 3.15.0+