javascript - How to update the mouse position during the "dragMove" event using Flickity and GSAP?

Question

I'd like the custom cursor to move with the mouse during the drag event of the carousel without the awkward "jump" back to its starting position, at the end of the drag. I'm using GSAP's quickSetter for the cursor and Flickity for the carousel. Here is a minimal --> Codepen that shows the issue.

I've managed to use the:

flkty.on( 'dragMove', function( event, pointer, moveVector ) {...});

so that the cursor moves with the mouse during the drag, however, when the drag ends, the new cursor position is not updated, so it jumps back to its starting position. I need a way if storing/updating the position after drag.

gsap.set(".ball", {xPercent: -50, yPercent: -50});

const ball = document.querySelector(".ball");
const pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
const mouse = { x: pos.x, y: pos.y };
const speed = 0.35;
var active = false;

const xSet = gsap.quickSetter(ball, "x", "px");
const ySet = gsap.quickSetter(ball, "y", "px");

window.addEventListener("mousemove", e => {    
  mouse.x = e.x;
  mouse.y = e.y;  
});

gsap.ticker.add(() => {
  if(!active){
    const dt = 1.0 - Math.pow(1.0 - speed, gsap.ticker.deltaRatio()); 
    pos.x += (mouse.x - pos.x) * dt;
    pos.y += (mouse.y - pos.y) * dt;
    xSet(pos.x);
    ySet(pos.y);
  }
});

//--Flickity--//

var $carousel = $('.carousel').flickity();

$carousel.on( 'dragMove.flickity', function(mousemove, pointer, moveVector) {
    
  mouseX = mousemove.clientX;
  mouseY = mousemove.clientY;
  console.log(mouseX)
  
  gsap.to({}, 0.0, {
    onUpdate: function() {
      gsap.set(ball, {
        x: mouseX,
        y: mouseY
      })
    }
  })
  
  active = true;
  
});

$carousel.on( 'dragEnd.flickity', function() {
  active = false;   
});

question from:https://stackoverflow.com/questions/65867306/how-to-update-the-mouse-position-during-the-dragmove-event-using-flickity-and

Answer 1

Waitting for answers