Weird one here... (that's not a statement about myself btw)
If you look at my pen, I have an issue where, when you hover over the red box, the SVG rectangle rotates slightly. That's fine.
When you mouse off of the red square though, the animation ends when the timeline has completed (more on that in a minute), and the SVG snaps back to a completely unrotated version of itself.
After looking through inspector, I realised that GSAP was removing the SVG transform attribute, and replacing it with it's css matrix.
If I add a set to the end of the timeline (which shouldn't be necessary anyway), to maintain the -45 degree rotation, it is ignored.
So that's issue: #1.
Right, so I thought, "the timeline displays the rotation correctly, so rather than pausing the timeline with .pause(), I can use something like, .pause(0.0001). Not ideal, but it should work.".
If you switch lines:
You'll see that after the first mouse off event, all is great the rectangle sticks in its rotated state. Hurrah!
However, if you mouseover it a second time, the timeline plays once more, and then stops... Or so it seems.
If you click the Is Timeline Active button, you'll see that as far as GSAP is concerned, the timeline is still running, and is just running endlessly, without any repetition.
And that's issue: #2.
To be honest, I don't really care which one of these issues I can get solved, although issue #2 seems like a bug in the GSAP Timeline object itself (being active, without being active).
Any idea on how to get around either of these issues?
NOTE: This is a hugely simplified example of what I'm doing at the moment, so I'd really like to avoid changing any part of the SVG markup itself, if at all possible.