1.1.0 • Published 8 months ago
@toon.rombaut/magnetic-elements v1.1.0
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
Installation
npm
npm i @toon.rombaut/magnetic-elementsyarn
yarn add @toon.rombaut/magnetic-elementsUsage
- 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: toon.rombaut@hotmail.com