Jump to content
Search Community

SVG Rotation Issue // Timeline repeat -1 / Always active [[DOUBLE ISSUE!]]

kez1304 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,


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:

// tl.pause(0.0001);

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.



Thanks guys! :):D:P

See the Pen bgqbrW?editors=0010 by anon (@anon) on CodePen

Link to comment
Share on other sites

Thanks a lot blake,


That transform was just what my vector graphic program threw out when I exported to SVG... Am to assume that I'll always have to look out for that when exporting SVG's? Because that could become a headache with larger infographics when I'm looking at animating them.


It's also going to result in more work when ensuring that my no-js SVG's still look right.


Is there nothing that can be done? Maybe GSAP could convert the transform attribute to a style on first contact or something?

Link to comment
Share on other sites

To figure out what's going on, lets look at what the timeline is doing. Using a pause with no time, we can see that everything is behaving like it should.

See the Pen dNvpVj?editors=0010 by osublake (@osublake) on CodePen


Lets look at the timeline again, but using a pause with a specified time value...

See the Pen RKpGLE?editors=0010 by osublake (@osublake) on CodePen


Now I'm no expert, but I did see Interstellar, so I'm pretty sure that you have somehow managed to open up a wormhole, ripping through the fabric of the space-time continuum, sending your SVG into the future, while we remain in a seemingly paused state of time. When your SVG does return, it will have aged several decades in the blink of an eye due to time dilation.


If somebody else has a better theory, I'm all ears.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...