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

[kez1304 7 Likes (Newbie)]

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();
// 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!

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

[OSUblake 9,990 Likes (Superhero)]

You have a transform on your rect. If you are going to tween a transform, always use GSAP to set it. 

 

And I think your isActive issue is probably because you were accidentally triggering the hover as you had it so close to the button. Also, timelines don't have eases.

 

See the Pen bgqdgq?editors=1010 by osublake (@osublake) on CodePen

[kez1304 7 Likes (Newbie)]

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?

[PointC 8,599 Likes (Superhero)]

I think it's always a good idea to review the code that your vector software kicks out for you. Quite often you'll see some weird transform that it decided to add for no apparent reason. 

 

It's the wild west of SVGs.

 

Happy tweening.

[kez1304 7 Likes (Newbie)]

Can either of you explain what's going on in:

 

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

 

Mouse over and off of the red box twice, and you'll see what I mean.

[OSUblake 9,990 Likes (Superhero)]

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.

[PointC 8,599 Likes (Superhero)]

It doesn't matter how advanced that SVG is when it returns. It still won't work correctly in Internet Explorer.

[Carl 9,066 Likes (Superhero)]

Odd issue for sure. Sorry for the frustration and thanks for the demos.

 

I forked Blake's version and dropped in TweenMax 1.19.1 (released this week) and it seems to fix the problem.

 

http://codepen.io/GreenSock/pen/dNvNdW

 

Anyone see any problems?