Get current rotation of element controlled by both Draggable and tween? [v3] [solved]

[Friebel]

In an existing project (using gsap v2) there is a disc a user can spin around (using Draggable), but it can also temporary turn off Draggable and spin by 'itself' (using a tween). Currently I am upgrading gsap to v3 in this project (btw, this is not the project I wrote about earlier).

 

Everytime the rotation of the disc changes (by user drag or auto rotate) another display updates accordingly. In version 2 I did this by getting the angle of the disc with reading out the _gsTransform of the js part of the DOMelement. Which was being updated by Draggable and tweens, so was always the right value, no matter how the disc was controlled (manually by a user, or automatic by tween). But that behaviour seem to have changed in v3.

 

At first I replaced the code using _gsTransform (to get the rotation) by element.getProperty('rotation'). To find out the element doesn't have a rotation property. Well at least not at first before being animated by the tween once. Before (in v2) it did have a value with _gsTransform, because Draggable updated it.

 

Looking in the documentation of version 3 I see Draggable has it's own ('readonly') .rotation property and that it updates perfectly when the user drags the disc. So that's perfectly usable, but only solves half the problem. Because that rotation value doesn't change when the DOM element is being controlled by a tween (and so gets in reality a different rotation value). So when the tween rotates the disc the draggable .rotation property stays on the last value draggable put it to. Which is clearly not right anymore.

 

Ofcoarse I can solve this myself by keeping my own rotation value, which once updates itself by the .rotation property of the draggable object and another time by the (hopefully existing) getProperty('rotation') of the element when being animated by a tween. But that feels a little hacky to be honoust and I'm wondering if it would not be possible to update the .rotation value of the draggable object, or, better in my opinion, have the property of the element that can be requested with getProperty() update itself when draggable changes the rotation value of that element. So what I mean is; would it be possible for us somehow to request the real rotation value of the disc directly from the rotated element (meaning the javascript part of that DOM element) at all times? (so like in v2). So no matter if it's being controlled by Draggable or tween, we could alway rely on the rotation property of the element itself? Or @GreenSock if that's not currently possible, maybe add that functionality in the lib if not exising yet?

 

Thanks in advance!

 

BTW I read your reactions @GreenSock Jack. Thanks for that. I will react later. But for now just so you know: I do have a Club Greensock subscription. And ofcoarse I think Greensock and all your effort is worth that 🙂

 

[edit] I forgot to add: I found some 'ThrowProps' in the documentation of version 3. But if I am not mistaken, all 'ThrowProp' has been renamed to 'Intertia' in version 3, right? Just to let you know, here's the link to the 'ThrowProps' I found in the documentation: https://greensock.com/docs/v3/Plugins/Draggable in case you'd like to change it.

[GreenSock]

27 minutes ago, Friebel said:

At first I replaced the code with _gsTransform (to get the rotation) by element.getProperty('rotation'). To find out the element doesn't have a rotation property.

No no, it's gsap.getProperty(element, property)

 

The old _gsTransform way was pretty limited - that's why in GSAP 3 we moved to the much more flexible gsap.getProperty() way of doing things because that covers other properties too (not just transforms). 

 

So it should be as easy as: 

var curRotation = gsap.getProperty("#id", "rotation");

 

What's also kinda cool is that getProperty() can return a function that allows you to get properties for that target anytime...

var getter = gsap.getProperty("#id"); // notice we didn't provide a property!

// then later...
var rotation = getter("rotation"),
    x = getter("x");

The other really nice thing about getProperty() is that you can define a certain unit like "px" or "%" or "em". 

 

41 minutes ago, Friebel said:

I found some 'ThrowProps' in the documentation of version 3.

Good catch! Should be fixed now. For the record, Draggable 3 still recognizes throwProps for legacy code reasons. 👍

[Friebel]

17 minutes ago, GreenSock said:

No no, it's gsap.getProperty(element, property)

Yes!!! and OMG, you are completely right, I used getProperty() directly on the element instead of using the gsap object. And I even should have known/spotted it as I used getProperty() on other projects too now, but there the right way. Guess it's getting late, time to stop! 😉

 

So it's completely working as wished for now (and like the _gsTransform before, but better)! 🙂

 

getProperty() is a great addition btw. Nice to have an 'official' public method for this.

 

Thanks for your quick reaction @GreenSock Jack

[Friebel]

23 minutes ago, GreenSock said:

What's also kinda cool is that getProperty() can return a function that allows you to get properties for that target anytime...

var getter = gsap.getProperty("#id"); // notice we didn't provide a property!

// then later...
var rotation = getter("rotation"),
    x = getter("x");

The other really nice thing about getProperty() is that you can define a certain unit like "px" or "%" or "em". 

That's actually pretty nice indeed! Great to know