tween ignored when using pause() in a call.

[t.marty]

I'm using TimelineLite and try to achieve the following:

• Some Banner animation
• A call() for the end animation
• Banner gets repeated a certain amount of times (see maxLoops)
• Before repeat there are some additional animation
• After the very last repeation there is one last animation

 

So I have a standard animation which is triggered everytime, some animations which are triggered before repeat and one animation at the end.

 

Problem is, that as soon as I add tl.pause() all animations which should come at the end are ignored and are not triggered.

 

Please check the CodePen for a simple example.

 

Thanks for your help!

Toby

See the Pen VVRMjx by anon (@anon) on CodePen

[GreenSock]

Welcome to the forums, @t.marty. 

 

As far as I can tell, the GSAP code is working exactly as it should. The reason that last animation doesn't happen is because you're calling pause() immediately after adding that animation to the timeline...so the playhead sticks there (before the animation actually plays). It's sort of like adding something to a playlist on your phone and then immediately hitting "pause". 

 

I assume that maybe you meant to set things up so that it pauses AFTER that animation plays, which you can easily do by using an onComplete or a call() or even an addPause(). Lots of options. 

 

Frankly, however, I think the way you're building things is rather convoluted with all those conditional statements, keeping track of how many loops manually, building and triggering other animations part-way through, etc. I'd strongly recommend reading this article: 

https://css-tricks.com/writing-smarter-animation-code/

 

If I understand your goal correctly, I think you'd be much better off just modularizing your animation code into functions that spit back timelines (or tweens) and just drop them all into a master timeline. That way, you get everything built and sequenced at one time and you're done. No conditional logic, no manually tracking repeats, etc. 

 

Let us know if you need anything else. Happy tweening!

 

PS You do know about TimelineMax's "repeat" and "onRepeat" abilities, right? Are you just using TimelineLite to keep file size down? If so, TimelineMax isn't much larger and you're not charged for the file size on any of the major ad networks because all the GSAP files are whitelisted as long as you use their CDN. 

[t.marty]

Thanks for your fast reply @GreenSock

 

I appreciate the detailed explanation of possibilities for this issue, which I will go through one by one.

If I still am not able to solve my issue after this, I will post it here.

 

About your note regardin TimelineMax we really use the lite Version because of the file size which many publishers want to keep as low as possible. As long as I can solve all problems I currently face, I will keep using TimelineLite, so I don't have to rewrite the code in case TimelineMax is unsupported.

Anyway, I may reconsider switching to TimelineMax when I find a feature that helps making banner animations simpler.

[GreenSock]

No problem. But like I said, every ad network that I know of has whitelisted GSAP, meaning it costs you NOTHING (kb-wise) to use any of the GSAP files including TimelineMax. 

 

As for building banners, it's super useful to be able to just do this:

 

var tl = new TimelineMax({repeat:2}); 

 

And then it'll run the animation 3 times total. And if you need to run some logic each time it repeats, just slap an onRepeat on it and you're done. 

 

But it's totally fine if you prefer to stick with TimelineLite and do things like that manually. 

 

Happy tweening!

[Carl]

this question comes up quite a bit.

 

the demos below each contain a looping sequence of blue, pink green divs fading in and out. they reach repeat 3 times but do something different on the last iteration.

 

this demo shows how to stop an animation before the final green frame fades out on the last frame:

See the Pen eprVXV?editors=0010 by GreenSock (@GreenSock) on CodePen

This one plays a custom ending animation after the third iteration

See the Pen OaqqVV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

for the most flexibility and code-reusability combine this method with what GreenSock suggested about using functions to create each individual part of your animation.

[t.marty]

I finally managed to optimise my code quite a bit.

Now it is also possible to change maxLoops to 0 for endless loops.

 

Please have a look and give me a feedback.

 

What I am unsure is, if I could still use .call() to separate the end animations from the main Animation.

If I understand correctly I cannot extend my tl. tween outside of the bannerAnimation() function.

 

This is my new CodePen:

See the Pen pqbpLL by anon (@anon) on CodePen

 

 

[Carl]

Sorry, I'm a bit lost here and not really understanding what all your code is supposed to do or what you mean about using call() to separate your end animations. If you put all your animations in master, then I don't think you really need to be calling external functions when the animation is playing.

 

If I understand correctly I cannot extend my tl. tween outside of the bannerAnimation() function.

 

if you define var tl  = new TimelineLite() inside a function, then yes, you can not access tl outside that function.