jeudi 13 août 2020

JS mousemove animation angle needs to go slowly back to Zero

Have an if statement that makes an angle of an element on mousemove go back to zero under certain conditions. Need to make it go slowly back to zero from an angle that it had before going out of the set conditions.

const initEyeMove = () => {
  let eyeBall = document.querySelector(`.eyeball`);
  let pupil = document.querySelector(`.pupil`);

  if (eyeBall && pupil) {

    let eyeArea = eyeBall.getBoundingClientRect();
    let pupilArea = pupil.getBoundingClientRect();
    let R = eyeArea.width / 2;
    let r = pupilArea.width / 2;
    let centerX = eyeArea.left + R;
    let centerY = eyeArea.top + R;

    document.addEventListener(`mousemove`, (e) => {
      let x = e.clientX - centerX;
      let y = e.clientY - centerY;
      let theta = Math.atan2(y, x);
      let angle = theta * 180 / Math.PI + 360;

      if (angle < 275 || angle > 440) {
        angle = 0;
      }


      pupil.style.transform = `translateX(${R - r + `px`}) rotate(${angle + `deg`})`;
      pupil.style.transformOrigin = `${r + `px`} center`;
    });
  }
};


export {initEyeMove};

Aucun commentaire:

Enregistrer un commentaire