easing Mousemove easing, interpolation with gsap.

[SpiritedMan 1 Likes (Newbie)]

Hi! everyone. this is my demo tunnel https://codesandbox.io/s/digit-tunnel-4vkc91?file=/src/index.js and i wanted to add easing with GSAP to make mousemove more smooth, like in this website https://archiviostoricoexperience.gruppotim.it/en/optical-fibre .. but couldn't achieve such smooth easing effect , can someone help .?

See the Pen index.js by s (@s) on CodePen

[Rodrigo 5,436 Likes (Superhero)]

Hi,

 

Nice tunnel! 🎉

 

I think a QuickTo instance is the best option for this.

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

Something like this (I removed from the constructor method everything that is not kind of relevant to the answer to keep the code block as short as possible, but is still needed there just in case):

constructor(options) {
  this.windowHalfX = window.innerWidth / 2;
  this.mouseXObj = {val: 0};
  this.toX = gsap.quickTo(this.mouseXObj, "val", {
    duration: 0.25,
    onUpdate: () => {
      this.mouseX = this.mouseXObj.val;
    },
  });
  this.mouseX = 0;
  this.targetX = 0;
  this.mouseMove();
}

mouseMove() {
  document.body.addEventListener("mousemove", (e) => {
    e.preventDefault();
    this.toX(e.clientX - this.windowHalfX);
  });
}

You can tinker with the duration and easing as well to find the best possible configuration for your case.

 

Let us know if you have more questions.

 

Happy Tweening!

[SpiritedMan 1 Likes (Newbie)]

thank you ! very helpful!