Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nysh

How to update/store cursor position during drag event

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

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
});

 

  • Like 4
Link to comment
Share on other sites

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




 

Link to comment
Share on other sites

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.

  • Like 3
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.
×