user3100157 user3100157 - 1 year ago 74
Javascript Question

How does achieve the side menu proximity animation?

The website has a side menu that responds to the mouse cursor proximity and position relative to the menu. It's as if they were magnets and the mouse was pulling the menu.

How was this achieved? Are there any libraries that provide this behavior?

Answer Source

I think it's custom code. A possible way to do it is to use canvas for the edge of the menu to create the organic / magnetic pull effect towards the mouse.

In javascript you can add a listener to the mousemove event. In the canvas element you can draw a beziercurve towards the mouse coordinate at a certain threshold (when the mouse is close enough to the menu). If the mouse is almost touching the menu, the menu expands. In this case I added a class to the menu when the mouse is close enough to it, which animates the left position of the menu so it slides into view.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

function draw(x,y){
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.fillStyle = '#000000';

document.addEventListener('mousemove', function(e){
  if(e.x < 200 && e.x > 100){
    draw(200-e.x + 20, e.y);
  else if(e.x < 100){

I made a rough codepen to demonstrate it: