How to make image not snap to cursor?-CodePudding

Trying to make an image follow the mouse. It works, but the problem I'm having is that upon refresh/first movement, the image will appear at the top left and snap to the mouse position. How do I get rid of that process and just have the image appear from under the mouse?

const mouse_trail = document.getElementById('mouse_trail');

window.onmousemove = e => {
  mouse_trail.style.opacity = 1;

  const x = e.clientX - mouse_trail.offsetWidth / 2,
    y = e.clientY - mouse_trail.offsetHeight / 2;

  const keyframes = {
    transform: `translate(${x}px, ${y}px)`
  }

  mouse_trail.animate(keyframes, {
    duration: 800,
    fill: 'forwards'
  });
}

#mouse_trail {
  height: 20px;
  width: 20px;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity 500ms ease;
}

#mouse_trail img {
  position: absolute;
  height: 80px;
  width: 80px;
  animation: rotate 2.5s infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

<div id="mouse_trail">
  <img src="https://picsum.photos/200/300" />
</div>

CodePudding user response：

Set a flag to check if this is the first time you are moving the element, and if so, animate it to that target position with a duration of 0.

const mouse_trail = document.getElementById('mouse_trail');
let didMoveYet = false;

window.onmousemove = e => {
  mouse_trail.style.opacity = 1;

  const x = e.clientX - mouse_trail.offsetWidth / 2,
    y = e.clientY - mouse_trail.offsetHeight / 2;

  const keyframes = {
    transform: `translate(${x}px, ${y}px)`
  }

  if (!didMoveYet) {
    didMoveYet = true;
    mouse_trail.animate(keyframes, {
    duration: 0,
    fill: 'forwards'
  });
  }
  
  mouse_trail.animate(keyframes, {
    duration: 800,
    fill: 'forwards'
  });
}

#mouse_trail {
  height: 20px;
  width: 20px;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity 500ms ease;
}

#mouse_trail img {
  position: absolute;
  height: 80px;
  width: 80px;
  animation: rotate 2.5s infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

<div id="mouse_trail">
  <img src="https://picsum.photos/200/300" />
</div>

CodePudding user response：

We might hack our way into a nicer behavior by rendering the image outside of the view

#mouse_trail {
  height: 20px;
  width: 20px;
  position: fixed;
  left: -20px;
  top: -20px;
  z-index: -1;
  opacity: 0;
  transition: opacity 500ms ease;
}

even if the image snaps to the cursor, it will snap from outside of what the user can see.

feel free to change top and left params to make the image disapear outisde of view