Draggable's rotation not synced with mouse movement

[t-plane]

Hi all. Im having difficulty with rotation plugin. Unlike in the demo, the rotation I get it not synced up with mouse movement (or touch and drag) in my app. Instead it looks like its easing to the needed rotation. What am I missing here? 

 

 

 

        var rotationSnap = 90;
        Draggable.create("#wheelHolder", {
            type:"rotation",
            throwProps:true, 
            snap:function(endValue) { 
                return 360 / notes1Arr.length;
            }
        });

See the Pen by chord-wheel (@chord-wheel) on CodePen.

[Diaco]

Hi t-plane 

 

hmm , unfortunately i can't understand what's your problem , everything works as expected  :

 

 

See the Pen yYyNLJ by MAW (@MAW) on CodePen.

 

pls fork the above Codepen with your code if still have any problem .

[t-plane]

hey Diaco - please check out my example at http://anatoliyg.github.io/chord-wheel/

[Carl]

We can't effectively troubleshoot the demo unless you give us access to editable code.

We suggest using CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

I noticed on my phone that the whole page did a 3D transform when I dragged over the wheel. 

Please remove everything but the wheel elements and the Draggable code so we can see if there is a problem in the most basic setup. 

 

thx.

[Carl]

Oh and absolutely remove this css transition code:

 #wheelHolder {
                width: 500px;
                height: 500px;


                background-color: aquamarine;
                border-radius: 50%;


                margin: 0 auto;
                
                -moz-transition: all 1s ease;
                -webkit-transition: all 1s ease;
                -o-transition: all 1s ease;
                transition: all 1s ease;
            }

[GreenSock]

Yep, the problem is that you added a CSS transition. Every time GSAP updates the value, your CSS transition is saying "oh, wait...don't apply that immediately...let me slowly animate to that new value." (literally 60 times per second). That's what's causing all that lag. It's never good to have CSS transitions AND JavaScript animations on the same element.

[t-plane]

haha.. yea i missed that obvious one. thanks guys.