Jump to content
GreenSock

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

How to Smoothly Drag an Element

Go to solution Solved by ZachSaucier,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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. 

  • Like 2
Link to comment
Share on other sites

@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!

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.
×