Scale not transitioning smoothly while mouse moves.

So the bug I am currently experiencing is that when I enter an object which has the scale option, it only scales in a smooth manner if I leave my mouse completely still as the transition occurs. If I continue to move my mouse as the transition is occurring, the scale will not occur at all, and then once the allotted time has passed (set by speed option) the animation jumps to completed, and the item grows to full size with no transition played at all. I will attempt to get a screencast gif later tonight when I am home from work.

I have forked the repository and had a peek at the code. I am currently at work so I do not have much time available to me but I believe I have found the issue. When I am home from work tonight, I will attempt to fix it if it is not fixed by you already by then. I am only a beginning coder though, so perhaps I will be unable to fix it.

anyways, what I believe is the issue is the combination of onMouseMove() and update() which updates scale 3d. I think if you continue to move the mouse fast enough, it just keeps updating the scale to the same size because onMouseMove() is constantly being called before the transition has enough time to take effect.

What I planned to do is move the scale portion into it’s own function called updateScale() and only call that on onMouseEnter and onMouseLeave.

  onMouseMove(e) {
    // set event
    this.event = e;
    this.updateElementPosition();


    window.requestAnimationFrame(() => this.update());   <======================

    if (typeof this.settings.onMouseMove === 'function')
      this.settings.onMouseMove(this.element);
  }

and

update() {
    const values = this.getValues();

    this.element.style.transform = `perspective(${this.settings.perspective}px)
      rotateX(${
        this.settings.disabled && this.settings.disabled.toUpperCase() === 'X'
          ? 0
          : values.tiltY
      }deg)
      rotateY(${
        this.settings.disabled && this.settings.disabled.toUpperCase() === 'Y'
          ? 0
          : values.tiltX
      }deg)
      scale3d(${this.settings.scale}, ${this.settings.scale}, ${     <=========
      this.settings.scale                                            <=========
    })`;

    if (this.settings.shine) {
      Object.assign(this.shineElement.style, {
        transform: `rotate(${values.angle}deg) translate3d(-50%, -50%, 0)`,
        opacity: `${this.settings['shine-opacity']}`
      });
    }

    // tilt position change event
    this.element.dispatchEvent(
      new CustomEvent('tiltChange', {
        detail: values
      })
    );
  }

[ChanceTheHacker]

no problem, and thank you as well. If you don’t mind please share with me the fix once you find it so I can learn from the experience as well.

[ChanceTheHacker]

Your 1st idea is something I had the intention of trying last night but ran out of time. Two things I did notice.

1)When I removed scale3d from the onmousemove it stopped working completely. 2) this (I think) was because the onmouseenter did not run the update function so I was thinking to maybe add only the scaling portion to on mouse enter and leave the on mouse move alone.

The only issue with this thought process was the additional bug I found last night where the rotate x and y values are also not working during the transition time too, and I believe that they should still be operational while scaling is happening