How to update/store cursor position during drag event

[Nysh 1 Likes (Newbie)]

Hey fam, 

As can be seen in the demo, when the drag completes, the cursor jumps back to its original position, before updating on mousemove. I'm wondering if there's a way to store or update it's position during the drag event (using quicksetter?), to avoid the awkard "jump" at the end. I'm using Flickity for the carousel, but the concept might be helpful/applicable for anyone using a GSAP custom cursor with a draggable slider.

Any guidance would be greatly appreciated  . Cheers  ~!
 

See the Pen eYdawgd by Nysh (@Nysh) on CodePen

[Dipscom 3,366 Likes (Superhero)]

You alreay have everything set up for what you need. The issue is that when you're updating the ball's position inside your 'dragMove.flickity' you're storing the values in "mouseX" and "mouseY", which are not shared anywhere. The values should be stored in your mouse object. Also, during your dragEnd.flickity event, you sholud also get the mouse coordinates and store the x and y in your mouse object, otherwise, it is likely that your circle will not stop where you expect it to.

[Nysh 1 Likes (Newbie)]

Hey @Dipscom

Thanks so much for the prompt response. That makes sense about the values not being shared...sorry for the noob questions... how would I go about storing those values in the mouse object? I would love to make it work, but i am a bit out of my depth

[Dipscom 3,366 Likes (Superhero)]

You're already half doing it.

 

const mouse = { x: pos.x, y: pos.y }; // this is your mouse object.

[...]
 
window.addEventListener("mousemove", e => {    
  mouse.x = e.x; // this is you storing the values on mouse move
  mouse.y = e.y;  
});

[...]
 
$carousel.on( 'dragMove.flickity', function(mousemove, pointer, moveVector) {
    
  mouseX = mousemove.clientX; // this is where it is going wrong. it should be mouse.x and mouse.y
  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;   
  // and here you should also get the mouse coordinates and update your mouse.x and mouse.y
});

 

[Nysh 1 Likes (Newbie)]

Yooo @Dipscom~

Thanks so much ~!!

I've updated the Codepen and it seems to be working exactly as intended! 
I'm not updating the mouse.x and mouse.y on dragEnd though? i've kept the active variable false the whole time, not sure if that is why?

Thanks again for taking the time to help us out. Much appreciated.

See the Pen jOMogZa by Nysh (@Nysh) on CodePen

 

[Dipscom 3,366 Likes (Superhero)]

Glad you've made it work.

 

With the active varible set to always be false, the code inside the cursor() method will always be executed. Which means, the position is always updated, regardless of the dragging going on or the mouse moving. So, yes, that certainly helps. And, you probably can get rid of the active variable and all references to it, then.