Proximity.js

]

Proximity.js is a small library meant to help when dealing with actions involving the distance or proximity feedback between the pointer and other elements on the page.

Usage

This is how to use the library.

First start by creating a proximity instance, this is for performance issue. Everything lives inside a requestAnimationFrame callback.

import Proximity from "@srenault404/Proximity"

const proximity = new Proximity({
    mediaQuery : "(max-width : 700px)" // can be any mediaQuery
})

Then you can create handlers to the mouseMove event using Proximity primitives. Note there are different type of subscription with different performance costs and different output. The most standard one wich is also the most resource expansive one ( although very lightweight ) is box.

proximity.box : distance between the pointer and a box => dom element proximity.radius : distance between the pointer and a circle => {x,y,r} or dom element proximity.point : distance between the pointer and coordinates => {x,y} proximity.x : distance between the pointer and the X axis => {x,y} proximity.y : distance between the pointer and the Y axis => {x,y}

const el = document.querySelector(".el")

const b = proximity.box(el, (dist) => {
    console.log(dist)
})

For performance issue an unique listner is added per instance and you need to subscibe your handlers.

//subscribe the listener
proximity.subscribe(b)


//unsubscribe the listener
proximity.unSubscribe(b)

Develop

First init yarn or npm and then all the dependencies of the package

yarn install

// clear the dist directory
yarn run clean


// build the bundle using microbundle
yarn run bundle

// publish the bundle
yarn run publish

History

For a long time I have been building components involving listening to mouse pointer movements to trigger some animations. While the mousemove event is somewhat useful it have it's limits.

Codedrops

History

Licence MIT @Simon Renault

Roadmap

• Adding distance to a radius

• Adding distance to a point

• Adding distance to axes (X,Y)

• Basic optimisations

• Switch to passive listeners

• Optimize getters

• Building another library to handle scroll

• Add helpers for tweenMax