Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
t-plane

Draggable's rotation not synced with mouse movement

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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 .

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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;
            }
  • Like 3
Link to comment
Share on other sites

  • Solution

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.

  • Like 3
Link to comment
Share on other sites

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

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.

×