Click-to-rotate tween conflicts with Draggable rotation and create glitches when drag immediately after click.

[Sagarsantra]

Implementing a circular time picker where a line rotates toward the pointer on click with a short tween, and should immediately hand off to drag if the pointer moves.
However, when clicking and then quickly dragging, the rotation glitches or remains bound to the tween briefly rather than following the drag instantly. onDragStart appears to fire on simple clicks (tiny pointer movement).

See the Pen GgpXVOB by dusfsrha-the-vuer (@dusfsrha-the-vuer) on CodePen.

[mvaneijgen]

Hi @Sagarsantra welcome to the forum!

 

Having several functions that target the same element is bound to cause issues (as you have noticed). What I think is a smart way of going about this is creating a tween that does your 360 rotation and then just update that tween to where you want it to go on either click or drag. 

 

What I've done is create one timeline with 360 animation then on click (with your logic) tween that timeline to the angle that is clicked (converting the angle to a time value using the mapRange utils https://gsap.com/docs/v3/GSAP/UtilityMethods/mapRange()/) and having a proxy element that is being dragged and onDrag of that element also updating the same timeline using the same mapRange function.

 

Now nothing is conflicting and everything plays nice with each other. The proxy element is visible now, but you of course can hide it. 

 

Hope it helps and happy tweening! 

 

See the Pen jEbeORQ?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

[GreenSock]

Thanks for reporting this - it actually did help expose a minor bug that could cause the onDragStart() to fire prematurely on type: "rotation" Draggables after the very first drag occurs (so the 2nd and beyond) in some cases, depending on rounding. It should be fixed in the next release which you can preview here: 

https://assets.codepen.io/16327/Draggable3.min.js

 

See the Pen vENQmLr?editors=0010 by GreenSock (@GreenSock) on CodePen.