Continues rotating disk

[Rob-Edgehero]

Hi everyone,

 

Im working on a project but got a bit stuck with it. 

Its a music mixer where im working on, the record should auto rotate 360 degrees after 3 seconds and continues rotating 360deg ( 720 deg total) and that continues infinitely adding more degrees ( or till its paused ).

 

but when the user drags the record, i want it to continue rotating again after the user lets go, on the degrees the user lets it go.

 

this is what i got now:

 

Draggable.create(ReactDOM.findDOMNode(this), {
  type:"rotation", 
  throwProps:false,
  onDrag: function() {
      console.log(this.rotation)
  }
});

TweenMax.to(ReactDOM.findDOMNode(this), 1, {rotation:110, repeat:-1})

the draggable rotation works that. but the tweenmax is not infinite yet.

 

 

See the Pen NRoJob by rob-edgehero (@rob-edgehero) on CodePen

[Rob-Edgehero]

Does anyone know the proper solution to this one?

 

got this for the continues rotation:

        TweenMax.to(ReactDOM.findDOMNode(this), 3, {
            css: {
                rotation: 360,
                transformOrigin: 'center center'
            },
            onUpdate: function() {
                console.log(this.ratio)
            },
            ease: Power0.easeNone,
            force3D: true,
            repeat:-1
        }, 0)

but that does not give me the rotation, so is this even possible with greensock?

[Jonathan]

Hello Rob-Edgehero and welcome to the GreenSock Forum

 

force3D: true would go inside your css:{} object since force3d property is part of the CSSPlugin

 

So above would be this:

TweenMax.to(ReactDOM.findDOMNode(this), 3, {
            css: {
                rotation: "+=360",
                transformOrigin: 'center center',
                force3D: true,
            },
            onUpdate: function() {
                console.log(this.ratio)
            },
            ease: Power0.easeNone,            
            repeat:-1
}, 0);

// or you could write it like this without css:{} object:

TweenMax.to(ReactDOM.findDOMNode(this), 3, {
           rotation: "+=360",
           transformOrigin: 'center center',
           force3D: true,
           onUpdate: function() {
                console.log(this.ratio)
           },
           ease: Power0.easeNone,            
           repeat:-1
}, 0);

• Are you trying to drag the circle and have it spin forever (infinite) ?

[Rob-Edgehero]

Ok thanks!

Yes im trying to drag the circle, and when its not dragged to spin it forever automatically.

 

One question still:

Can i get the rotation degrees from the tweenmax.to rotation?

 

for example in draggable, i can get it without any problems:

  onDrag: function() {
      console.log(this.rotation)
  }

but i cant find that for tweenmax

[Carl]

Hi,

 

Every element that has a transform property (rotation, scale, x, etc) changed by GSAP gets a _gsTransform element attached to it.

 

I updated your demo to show how to get the rotation during the tween (via an onUpdate) or from pressing a button

TweenMax.to("#disk", 1, {rotation:"+=360", repeat:3, onUpdate:function() {
           $("h1").text(this.target[0]._gsTransform.rotation)
        }})

Updated demo: http://codepen.io/GreenSock/pen/qawjkX?editors=1011

 

after the tween ends, grab the disk and rotate it and then press the "getRotation" button.

[Rob-Edgehero]

wow awesome Carl.

Thank you very much

[Carl]

You're welcome.