Pretty Magnetic

Pretty Magnetic is a javascript library for creating a better and smooth magnetic hover effect using GSAP.
Elements follow the cursor within a configurable radius and strength

Installation

``bash
npm install pretty-magnetic gsap
`

Basic Usage

$3

`javascript
import { PrettyMagnetic } from 'pretty-magnetic';

const magnetic = new PrettyMagnetic('[data-magnetic]');
`

$3

`javascript
const { PrettyMagnetic } = require('pretty-magnetic');

const magnetic = new PrettyMagnetic('[data-magnetic]');
`

$3

`html
Hover me!


`

Configuration Options

`javascript
const magnetic = new PrettyMagnetic('[data-magnetic]', {
magneticRadius: 200, // Distance in pixels where the effect starts (default: 200)
magneticStrength: 0.2 // Strength of the magnetic pull (0-1, default: 0.2)
});
`


Methods

$3

Removes event listeners and cleans up the instance.

`javascript
const magnetic = new PrettyMagnetic('[data-magnetic]');

// Later, when you want to remove the effect
magnetic.destroy();
`

Examples

$3

`javascript
// All elements with the class will have magnetic effect
new PrettyMagnetic('.magnetic-button');
`

`html
Button 1
Button 2
Button 3
`

$3

`javascript
const button = document.querySelector('#my-button');
new PrettyMagnetic(button, {
magneticRadius: 250,
magneticStrength: 0.3
});
`

How It Works

Pretty Magnetic calculates the distance between the cursor and each target element. When the cursor enters the magneticRadius`, elements are smoothly pulled toward the cursor with strength determined by:

- Proximity: Closer cursor = stronger pull
- magneticStrength: Your configured multiplier

The effect uses GSAP for smooth, performant animations with automatic cleanup when the cursor exits the radius.

Dependencies

- GSAP (^3.0.0) - Required peer dependency

License

MIT © SrD4vo