Jump to content
Search Community

Mousemove easing, interpolation with gsap.

SpiritedMan test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution



Nice tunnel! 🎉


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



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;

mouseMove() {
  document.body.addEventListener("mousemove", (e) => {
    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!

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...