Scale not transitioning smoothly while mouse moves.

[ChanceTheHacker]

Scale not transitioning smoothly while mouse moves.

[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.

[JB1905]

I made the above changes and didn't notice any difference. I will wait for the screen recording, because it is possible that I don't notice this problem on my computer.

[ChanceTheHacker]

here is attached gif, as you can see, the scale only occurs when my mouse accidentally slips out side the bounds for a moment, but when it's inside the bounds of the item and moving it does not scale.

[ChanceTheHacker]

and you can see here if I do not move my mouse, the scale works as intended.

[ChanceTheHacker]

and one more of it not working just for good measure.

[JB1905]

Thank You.
I need one more info - what values of the options you have set?

[ChanceTheHacker]

here is the code. all 3 containers have the same issue.

<div id="card-container">
			<ReactTilt 
			options={{
				reverse: true,
				scale: 1.1,
				speed: 800,
				easing: 'ease',
				'disable-y': true,
				shine: true,
				'shine-opacity': .7
			}} className="wl-card">
			 		<img className="gift-img" src="http://www.qygjxz.com/data/out/92/5171375-gift-images.jpeg" alt=""/>
	 		</ReactTilt>

		 	<ReactTilt
			options={{
				reverse: true,
				scale: 1.1,
				speed: 500,
				easing: 'ease',
				'disable-y': true,
				shine: true,
				'shine-opacity': .7
			}} className="wl-card">

		 	</ReactTilt>

		 	<ReactTilt
			options={{
				reverse: true,
				scale: 1.1,
				speed: 800,
				easing: 'ease',
				'disable-y': true,
				shine: true,
				'shine-opacity': .7
			}} className="wl-card">

		 	</ReactTilt>

[ChanceTheHacker]

I made this last one to show you something though. This is the same bug happening with only scale: 1.3 and speed: 800.

for me the bug appears with any setting as long as I use scale. However, if you do not increase the speed to above 800, it is not noticeable because the transition is so quick. The higher that you set the speed option, the longer the scale take and the more noticeable it becomes. at only 300 ms it's hardly even detectable.

[JB1905]

I have recreated the error on my computer. The error wasn't visible with default easing option. I will look into the problem tomorrow.
Thanks!

[ChanceTheHacker]

Here is what I did, I'm not sure if it is right but I hope it may help. Sadly I''m too much of a noob to even figure out how to test this myself with out importing the library via npm :(

  onMouseMove(e) {
    // set event
    this.event = e;
    this.updateElementPosition();
    window.requestAnimationFrame(() => this.update("mouseMoveFunc")); <=== sends a string to update

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

update(func) {
   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)`


     //Check if this is being sent by the onMouseMove function or not

     if (func !== 'mouseMoveFunc'){
       this.element.style.transform =`scale3d(${this.settings.scale}, ${this.settings.scale}, ${
       this.settings.scale


     })`;}

[ChanceTheHacker]

just an update, I did eventually start testing my code and It does not fix the issue. I did however discover while testing that it does not only effect scaling like I originally thought. This bug actually effects the rotate-x and rotate-y as well. Tried to fix it, but it's gotten late and it's time for bed for me. attached is a gif displaying the bug in action on rotate x and y

my settings

const elems = document.querySelectorAll('.tilt');
const universalTilt = new UniversalTilt(elems, {
  scale: 1.1,
  speed: 800,
  easing: 'ease'
});

The change to the source code I made that did not work

{
    key: "onMouseMove",
    value: function onMouseMove(e) {
      var _this2 = this;

      // set event
      this.event = e;
      this.updateElementPosition();
      window.requestAnimationFrame(function () {
        return _this2.update('onMouseMoveFunc');
      });
      if (typeof this.settings.onMouseMove === 'function') this.settings.onMouseMove(this.element);
    }
  }


key: "update",
    value: function update(func) {

      if(func !== 'onMouseMoveFunc' ){
      var values = this.getValues();
      this.element.style.transform = "perspective(".concat(this.settings.perspective, "px)\n      rotateX(").concat(this.settings.disabled && this.settings.disabled.toUpperCase() === 'X' ? 0 : values.tiltY, "deg)\n      rotateY(").concat(this.settings.disabled && this.settings.disabled.toUpperCase() === 'Y' ? 0 : values.tiltX, "deg)\n      scale3d(").concat(this.settings.scale, ", ").concat(this.settings.scale, ", ").concat(this.settings.scale, ")");
    }else {var values = this.getValues();
      this.element.style.transform = "perspective(".concat(this.settings.perspective, "px)\n      rotateX(").concat(this.settings.disabled && this.settings.disabled.toUpperCase() === 'X' ? 0 : values.tiltY, "deg)\n      rotateY(").concat(this.settings.disabled && this.settings.disabled.toUpperCase() === 'Y' ? 0 : values.tiltX, "deg)");
    }

[JB1905]

I have 2 ideas to solve the problem:

1. Block the onMouseMove() action until the transition animation completes.
2. Set maximum speed value of the enter / exit animation time to reduce delay.

[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