How to Smoothly Drag an Element

[ywlee]

Dear everyone:

 

I would like to drag an element smoothly(have some delay), like description below(I copied it from scrollTrigger's Doc)

• Soften the link between the animation and the the(typo?) scrollbar the drag movement so that takes a certain amount of time to "catch up", like scrub: 1 would take one second to catch up.

when using Draggable plugin, but I don't know if it is possible. (I think Inertia is not the solution because it's about after dragging)

The codepen demonstrates what I mean if no one could understand my weird English.

 

Also I would like to know is it a bad thing to call gsap.to in mousemove EventListener ? The event fires so many time in one second,  even before one gsap tween can properly finished, Will this cause any issue?

 

I just start learning code a few months before and I can't find the answer anywhere else, thank you for reading my forum until here, and any answer will be very very appreciated!

 

See the Pen GRjdKYP?editors=0010 by ywlee (@ywlee) on CodePen

[ZachSaucier]

Hey ywlee and welcome to the GreenSock forums.

 

56 minutes ago, ywlee said:

is it a bad thing to call gsap.to in mousemove EventListener ? The event fires so many time in one second,  even before one gsap tween can properly finished, Will this cause any issue?

It can be overkill depending on what you're trying to do. At the least you should use overwriting inside of your tween(s) within the mousemove listener to make sure that old tweens are killed off like so:

gsap.to(draggable, {
  duration: 1.2, 
  x: `${event.clientX-50}`,
  y: `${event.clientY-25}`,
  overwrite: 'auto'
});

If you're especially worried about performance, you could use GSAP's quickSetter instead. But then you need to handle the easing yourself. You could modify the mouse follower demo in the quickSetter docs to use the same sort of click and move logic that you have. 

[ywlee]

@ZachSaucier

That quickSetter docs and the 'overwright: auto' looks like exactly what I need.

I'll check it out and modify my code.

Thank you so much for your very helpful answer!