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

npm install pretty-magnetic gsap

Basic Usage

ES6 Modules

import { PrettyMagnetic } from 'pretty-magnetic';

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

CommonJS

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

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

HTML

<button data-magnetic>Hover me!</button>

<script type="module">
  import { PrettyMagnetic } from 'pretty-magnetic';
  new PrettyMagnetic('[data-magnetic]');
</script>

Configuration Options

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

destroy()

Removes event listeners and cleans up the instance.

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

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

Examples

Multiple Elements

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

<button class="magnetic-button">Button 1</button>
<button class="magnetic-button">Button 2</button>
<button class="magnetic-button">Button 3</button>

Using DOM Elements Directly

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