Best way to get SVG current rotation value?

[ada601]

Since animating an SVG element with rotation produces a matrix, what is the best way to obtain the current rotation value in an onUpdate callback?

 

Currently, the only way I found that works is to use the getProperty method. Is that the only way? If not, is it the appropriate way?

 

Thank you in advance.

[ZachSaucier]

Hey ada601 and welcome to the GreenSock forums.

 

4 minutes ago, ada601 said:

Currently, the only way I found that works is to use the getProperty method. Is that the only way?

What's not desirable about using the getProperty method? What sort of other method are you looking for?

[ada601]

It was a little hard to find it, actually! I'm coming from anime.js where I would just look at the current tween on update.

 

When I got here I found discussions about using "{self}" in onUpdateProps and that added a little to my confusion. Then investigating this in the callback left me empty handed.

 

No drawbacks, I just wanted to be sure that was the best way to do it.

[ZachSaucier]

Another approach would be to use this.targets() inside of a listener to get the current target(s) and then get the value from that. It's still probably best to use getProperty though  Just with the target from this.targets() (if it needs to be more dynamic than a string selector or whatever you are using as the tween's target). 

 

"{self}" is from older versions of GSAP and isn't supported in GSAP 3.

[ZachSaucier]

Do you happen to still have links to the thread(s) that you were looking at? It might be good for us to include a post about .getProperty in them so that future readers can find it more easily.

[ada601]

Getting the values right from the targets did initially seem more intuitive, until I realized the rotation is presented as a matrix transform.

 

Thank you for confirming.

[ada601]

1 minute ago, ZachSaucier said:

Do you happen to still have links to the thread(s) that you were looking at? It might be good for us to include a post about .getProperty in them so that future readers can find it more easily.

 

If there would have been a little tip alongside discussion of rotate anywhere the getting started docs that probably would have save me an hour. Everything else I read was via google and pretty old...

[ZachSaucier]

17 minutes ago, ada601 said:

If there would have been a little tip alongside discussion of rotate anywhere the getting started docs that probably would have save me an hour.

I added a little section to the getting started article: https://greensock.com/get-started/#get-property

 

Do you think that's sufficient for future readers? Sorry for the trouble finding this information caused you.

[ada601]

Quote

If you want to get the current value of a specific element, you can (at any time, of any element) use GSAP's .getProperty() method.

I just might add that this works even in arrow functions - since you just talked about how getting targets *doesn't*.

 

I you made an excellent addition to the docs!

[ZachSaucier]

1 minute ago, ada601 said:

I just might add that this works even in arrow functions - since you just talked about how getting targets *doesn't*.

Good point. I'll edit it to include it. Thanks for helping make things more clear for future people!