Jump to content
Search Community

Animation changed after restarting timeline

kevinMario 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

Long time user and a big fan of GSAP :)

 

Usually I can figure out issues on my own, but this time I'm really stuck. If you refresh the Codepen, you can see that the first animation is the text zooming in slowly, and then zooming out quickly after a brief delay.

 

Now after all the animation is done, I added a tl.restart(); so that it will go back to the start and replays everything, but this doesn't seem to be the case. The text animation is now only appearing instead of the whole zooming in etc.

 

Where did I go wrong??? o.O

 

 

See the Pen BaBxyRm by kevinmario (@kevinmario) on CodePen

Link to comment
Share on other sites

Hey Kevin, thanks for being a long term GreenSock user! Welcome to the forums.

 

I'm betting that this is because of the overlap of the tweens, all of which are affecting the scale. It seems to be confusing GSAP (understandably, because it's supposed to be animating to two different values). If you remove the '-=' parts of the "#text-01-01" tweens, it works as you'd expect.

 

As for why it works the first time, I am not sure. Maybe @GreenSock can shed some light on what's going on.

  • Thanks 1
Link to comment
Share on other sites

Welcome @kevinMario

 

Yeah, this is an overwriting issue. When a tween renders for the first time, it checks to see if there are any other tweens of the same property (on the same target) and if any are found, it kills them so that they're not fighting for control. Otherwise, you'd have one tween making the property go one direction, and another tween making it go in another direction. That's what we call "auto overwriting". You have overlapping/conflicting tweens - that's what's causing the problem. 


The reason it works the first time is because overwriting doesn't occur until the tween renders for the first time. So as soon as the 2nd tween starts, the first one gets killed (and that one doesn't come back). Therefore, the second time through the timeline, that first tween is dead. 

 

You can easily see if there's an overwrite happening by using the TweenLite.onOverwrite static method: 

TweenLite.onOverwrite = function(overwrittenTween, overwritingTween) {
 console.log("overwritten!");
}

You can either prevent them from overlapping (adjust your code) or you could set overwrite:false on your tweens. Or set TweenLite.defaultOverwrite = false. I hope that helps!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thank you so much for that @ZachSaucier and @GreenSock - I've used overlaps all these while without knowing they're called that, but never in conjunction with timeline restart. You learn something new everyday! :)

 

Also I'm very impressed with how responsive the Forums are. Hopefully I can make some kind of contribution here as well, given that I've used GSAP ( even though it's quite basic ) for more than 4 years now!

  • Like 1
Link to comment
Share on other sites

2 minutes ago, kevinMario said:

Also I'm very impressed with how responsive the Forums are. Hopefully I can make some kind of contribution here as well, given that I've used GSAP ( even though it's quite basic ) for more than 4 years now!

That's great! We love it when people pitch in to help others around these forums. It's what makes this neighborhood so special.

 

And if you like GSAP now...just wait till you see what we've got coming in the next release. Club GreenSock members will be getting early access pretty soon :)

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

It looks to me like the problem is inside your onComplete where you have this: 

$("#text-01-01").removeAttr("style")

You're removing that whole attribute - why? 

 

My best guess is that when you remove it, Safari actually detaches it from the element itself, and creates a whole NEW style object for it, so the one that GSAP is animating is...detached. 

 

If you're trying to remove or reset values, there are better ways. Like using clearProps:"all" (though I still don't understand why you'd need to wipe the styles in this case)

  • 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...