How to drag and rotate a image smoothly using Draggable rotation feature

[MusketeerHo]

I am trying to use gsap's Draggable plugin to rotate a two images of a wheel. I was able to use the draggable plugin with simple dom objects but I wanted to use it with canvas in html.

I have tried to do it without Draggable , but the animation is not smooth, plus at some points it is wrong (the rotation is in the opposite direction of finger drag direction). I am targeting mobile devices, but to make it understandable I have given the same functionality on the two buttons also.
I am having hard time trying to understand if and how can I use Draggable  with canvas to rotate these two circles using draggable's rotate method.

See the Pen ExaeEzP by MusketeerHo (@MusketeerHo) on CodePen

[ZachSaucier]

Hey MusketeerHo and welcome to the GreenSock forums!

 

Draggable is built to work with DOM elements, but you can get it working with Canvas elements with certain use cases. Rotating something in place is definitely one of those use cases!

 

There's actually a similar thread here:

 

You don't have to use Easel like he did though.

 

Another method would be to layer an invisible DOM element over each of the tops of your canvas items and apply the Draggable's rotation to them instead. Then inside of their onDrag and optionally onThrowUpdate functions you could change the rotation of the Canvas element to the same thing. For example, you could place something like the element below over your canvas element and change the updateRotation function to update your Canvas element's rotation.

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