Draggable rotation breaks on Firefox and IE not on Chrome

[icraft-websites 2 Likes (Newbie)]

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){

 

               }

             }

        }});

 

[Rodrigo 3,567 Likes (Superhero)]

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.

[icraft-websites 2 Likes (Newbie)]

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

[Rodrigo 3,567 Likes (Superhero)]

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.

[icraft-websites 2 Likes (Newbie)]

This is a code pen I just made for it and breaks on IE and FireFox but not chrome

 

See the Pen blkaf by joshscorrar (@joshscorrar) on CodePen

[icraft-websites 2 Likes (Newbie)]

I fixed and and it seems to be working but my source code is allot more comprehensive and still breaking. I have the latest version too. It's odd, Ive stripped back everything but I still cant seem to find it.

[Rodrigo 3,567 Likes (Superhero)]

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.

[jamiejefferson 1,193 Likes (Superhero)]

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 });