@toon.rombaut/magnetic-elements

v1.1.0

Published

8 months ago

A javascript library that makes dom elements react magnetic to the cursor.

Downloads

0High
0Medium
0Low

trombaut

magnetic elements magnetic elements

Magnetic elements

Lightweight library to make html elements magnetic to your mouse.

Features

Lightweight
No dependencies
Optionally use your own external RAF loop to increase performance
Fps aware lerping

Demo

Magnetic elements demo.

Installation

npm

npm i @toon.rombaut/magnetic-elements

yarn

yarn add @toon.rombaut/magnetic-elements

Usage

Add the 'magnetic-element' tag to your html elements that you want to make magnetic

<body>
    <div class="container">
        <button magnetic-element>I'm a magnetic button</button>
        <p magnetic-element>I'm a magnetic paragraph</p>
    </div>
</body>

Import and initiaze in javascript

//import
import { MagneticElementsController } from "@toon.rombaut/magnetic-elements";

//Initialize
const magneticElementsController = new MagneticElementsController();

If you don't need the magnetic elements anymore, or you want to re-initialize, don't forget to use the destroy method on the current instance. This is also adviced when changing pages in an SPA.

magneticElementsController.destroy();

Options

| Parameter | Type | Required| Default | Description | | ------ | ------ | ------ | ------ | ------ | | standalone | Boolean | No | false | Set to true if you are using your own external RAF loop. Can be used to increase performance. | | triggerArea | Number | No | 200 | The size of the area around the elements to trigger the magnetic effect. | | interpolationFactor | Number | No | 0.8 | The interpolation factor used by the lerp function. Value between 0 and 1. | | magneticForce | Number | No | 0.3 | The strength of the magnetic effect. Value between 0 and 1. |

Methods

Methods that can be executed on the EzSmoothScroll instance.

| Method | Parameters | Description | | ------ | ------ | ------ | | onResize() | / | Manually trigger the resize method. | | update() | / | Manually trigger an update of the magnetic elements. Useful if you use your own external RAF. | | destroy | / | Destroy the eventlisteners inside the instance. Important to execute if you want to re-initialize or to increase performance when you don't need the instance anymore. |

External RAF

You can use your own external RAF loop.

//import
import { MagneticElementsController } from "@toon.rombaut/magnetic-elements";

//Initialize
const magneticElementsController = new MagneticElementsController({
    standalone:false,
    triggerArea: 300,
    interpolationFactor: 0.5,
    magneticForce: 0.5
});

//render function,
render = () => {
    magneticElementsController.update();
    //do you other stuff here

    requestAnimationFrame(render);
}
//kickstart your own external RAF loop
render();

Support

I appreciate all feedback and comments.

Socials

Instagram: @toon.rombaut Email: [email protected]