Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kevinMario

Animation changed after restarting timeline

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi again,

 

So the issue with the above is fixed - but one more came out re: things disappearing in Safari on Mac and iOS ( it's also only the beginning bit with the overlap )

 

Codepen:

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

 

Has anyone else came across something like this?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×