Jump to content
Search Community

Draggable rotation breaks on Firefox and IE not on Chrome

icraft-websites test
Moderator Tag

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

Hey there, I have been using your Draggable on Chrome and it works fine when testing on chrome but when I try it on Firefox an IE it jitters and resets back to 0. Here is the core of the code. I have a feeling its something to do with support for the 'drag.target._gsTransform.rotation' across browser but I'm not sure.

 

 
        Draggable.create(minute, {type: "rotation", onDrag: function(e){
             if(!clockTimerFinished){
               var drag = Draggable.get(minute);
               clockTimerDegrees = Math.floor(drag.target._gsTransform.rotation);
               clockTimerTime = Math.floor(clockTimerDegrees / 360 * totalTimeInSeconds);
               clock.val(clockTimerTime).trigger('change');
               checkTimerPercent( timerPercent, clock, svgColor);
               if(clockTimerTime >= totalTimeInSeconds && !clockTimerFinished){
 
               }
             }
        }});
 
Link to comment
Share on other sites

Hi,

 

Is a little bit difficult (at least for me) to see what could be the issue with just this lines of code. Is there any chance you could set up a reduced live sample in codepen? Check the following post please:

 

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

 

Also when you're referencing a Draggable instance inside itself you don't need the get() method, just use this to refer to the Draggable instance and this.target for the element. Even further, in order to check for the target's rotation, just check for the rotation value the Draggable instance reports, which is identical to the one the target's _gsTransform object has:

Draggable.create(minute,
{
  type:"rotation",
  onDrag:function(e)
  {
    if(!clockTimerFinished)
    {
      // Draggable.get(minute).target._gsTransform.rotation is equal to this.rotation
      // inside the Draggable instance
      clockTimerDegrees = Math.floor(this.rotation);
      clockTimerTime = Math.floor(clockTimerDegrees / 360 * totalTimeInSeconds);
      clock.val(clockTimerTime).trigger('change');
      checkTimerPercent( timePecent,clock, svgColor );
      if(clockTimerTime >= totalTimeInSeconds)
      {}
    }
  }
});

Also I removed the second condition in the if() statement because you're already checking for that in the first conditional logic, so if the condition is true or exists the code is not executing.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

I will try and put up a codepen when I get the time. It appears clockTimerDegrees get's NaN after. 

 

clockTimerDegrees = this.rotation;  

 

(the rotation value appears to be NaN :(  )

 

 

and it changes the data type, this happens only in IE and Firefox but not chrome. :S

Link to comment
Share on other sites

Hi,

 

As far as I can tell this shouldn't be happening, this.rotation returns the angle in degrees and for that value isNaN() returns false, meaning that is a number. I set up a simple codepen to illustrate that part of a Draggable instance:

 

See the Pen iAaHd by rhernando (@rhernando) on CodePen

 

Tested it with IE11-10 and firefox 29 and 28 and it returns the expected value. Feel free to fork and adapt it to your scenario.

 

Finally there are two options. One, you're using an old version of Draggable and GSAP, please be sure to download the latest. Second, the issue is happening elsewhere in your code. If you're using an up-to-date version of the engine it'd be very useful to see the rest of your code.

 

Rodrigo.

Link to comment
Share on other sites

Hey, sorry to hear that...

 

As you mention the codepen is working as it should in all browsers.

 

The issue is in another part of your code. Check referencing a private var outside the function is created in.

 

Also as an advice, instead of using jQuery's css() method with all the vendor prefixes (which also could be a source of problems), use a set() instance, like that the CSS Plugin takes care of the prefixes for you:

setInterval(function(){
          if(!clockTimerFinished){
                clockTimerTime ++;
                clockTimerDegrees += degree;
                // instead of jquery's css()
                TweenLite.set(minute,{rotation:clockTimerDegrees});

                if(clockTimerTime >= totalTimeInSeconds){
                    Draggable.get(minute).disable();
                    clockTimerFinished = true;
                    clockTimerStarted = false;
                    clockTimerTime = 0;
                    clockTimerDegrees = 0;
                }
            }
         }, 1000);

Finally if you want to use GSAP to control the timer mechanism, which I'd recommend because since you're using it for the animations it'd made your app more consistent, you can check this reply by Jamie in order to create a setInterval equivalent using GSAP:

 

http://forums.greensock.com/topic/8424-clearinterval-equivalent/?view=findpost&p=32844

 

Or you can create a delayedCall instance and restart it:

var timer = TweenLite.delayedCall(1, function()
{
  // all your code here

  // now restart the delayed call again
  timer.restart(true);
});

// if you want the equivalent for clear interval you can kill() the delayed call
timer.kill();

Rodrigo.

  • Like 2
Link to comment
Share on other sites

I don't know what to say. That works fine for me and doesn't show NaN in any browser...

 

All I could see was that you had the wrong syntax for min/max rotation; it needs to be in a bounds object

Draggable.create(minute, {
    type: "rotation",
    bounds:{
      minRotation:0,
      maxRotation:360,
    }
});
You could also skip that vendor prefixed css stuff for TweenLite too

TweenLite.set(minute,{ rotation:clockTimerDegrees });
  • Like 1
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.
×
×
  • Create New...