Leaderboard

Thanks for the demo. In cases where you have transformed parents just set your transform values with GSAP and you should be in good shape The post below explains why it is better to use GSAP than CSS in these cases

Sorry for the late reply. Thank you this work better than previous function that I was using.

I'm rather curious myself as to the real-world need here. Personally, I would just transform the SVG itself. I'd think a multi-level nest of divs that each have transforms would just be a recipe for trouble no matter what you're doing, but I like things simple so I don't confuse myself.

You'd need to animate or set the opacity of new image in the callback. Here's another fork where I've added a 4th frame which appears at the end of the timeline. Happy tweening.

It is really easy to convert a CSS animation to GSAP, you just need to copy it mostly as it is. Only difference here is I am setting zIndex using set method. There is some additional code that is required to take care of rapid clicking because you are using button for each image. Take a look at docs in CSSPlugin, it will help you understand CSS animations using GSAP so you can convert easily. https://greensock.com/docs/Plugins/CSSPlugin

The way I get this information is to add it as a numeric property of the object being tweened: myObj.myRotation = 0; TweenMax(myObj, 1, {rotation:80, myRotation:80}); Then at any time, I can simply look at myObj.myRotation.