Single Timeline vs Multiple Timeline grouped in Master

[GaryD]

Hello, I am exploring whether organizing my animation into multiple separate timelines might be helpful.  I'm running into some differences that I wasn't able to find an explanation for in the docs...  This codepen includes simple examples organized into methods named working() and notWorking(). 

 

The working() example is similar to how my app is currently building a single timeline, in that it adds a callback and short pause after each chunk of animation... and then updates the progress on that timeline to 1 (the end) to trigger that callback before adding more animations.  After the entire animation has been built, these callbacks are called one more time before they are played (as a result of returning the progress to 0). 

 

The notWorking example is my attempt to accomplish a similar thing, but with multiple timelines that are all grouped together into a single master timeline.  I suspect there may be multiple problems with this implementation... I could probably work around them, but hope that resolving this confusion might help me better understand how to best organize my animations.

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

[PointC]

Hi @GaryD 

 

Welcome to the forum and thanks for joining Club GreenSock.

 

If I understand your desired result here, the recommended approach would be to build the nested timelines in their own functions and then return those to a master. Here's a quick fork of your demo with that implementation. 

 

See the Pen agGaKB by PointC (@PointC) on CodePen

 

Rather than go into a full explanation here, I think you'll love this article by Professor @Carl. It shows you the whole process of building timelines in functions.

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

 

Happy tweening and welcome aboard.

 

[OSUblake]

Just want to point out that your notWorking example isn't working because you have an error in two different places. Fix those, and it should work the same as your working example.

 

// BAD
tl2.to("#circle",0.001);

// OKAY
tl2.to("#circle",0.001, {});

 

 

And I'm also not sure by what you mean by adding a pause. Like literally pausing the timeline or delaying it?

 

[GaryD]

Thanks PointC, this is what I was trying to accomplish here.

 

And thanks OSUblake, that fixes my problem.  "Pause" probably wasn't the best choice of word for me to use here... I just meant adding a short amount of time to the timeline in which nothing is actually animating.

 

On a related note, I'm not very experienced with codepen, and seem to make several of these kinds of small errors.  For my bigger project, I'm using TypeScript which helps my editor detect and highlight this kind of error.  And I'm also using chrome which displays a good amount of debug information after something has gone wrong.  Do you have any tips for getting this kind of information while working in codepen?  Thanks again for your help!

 

[ZachSaucier]

You can use Typescript on CodePen by clicking the cog at the top of the JavaScript panel, clicking the dropdown that says "JavaScript Preprocessor", and then selecting Typescript.

[OSUblake]

2 hours ago, ZachSaucier said:

You can use Typescript on CodePen by clicking the cog at the top of the JavaScript panel, clicking the dropdown that says "JavaScript Preprocessor", and then selecting Typescript.

 

I wouldn't say it uses TypeScript. It just compiles it. TypeScript needs a code editor that understands it, which CodePen doesn't use. 

 

 

3 hours ago, GaryD said:

On a related note, I'm not very experienced with codepen, and seem to make several of these kinds of small errors.  For my bigger project, I'm using TypeScript which helps my editor detect and highlight this kind of error.  And I'm also using chrome which displays a good amount of debug information after something has gone wrong.  Do you have any tips for getting this kind of information while working in codepen?  Thanks again for your help!

 

You don't have to use CodePen. That's just what we like to use around here because it's simple and straightforward.

 

If needed, Stackblitz is a good for TypeScript. It uses the same code editor as VS Code.

https://stackblitz.com/

 

Just remember to keep your demos simple. We don't want to see your project, just the problem. ?

 

 

[GaryD]

Good to know thanks for these tips!

 

One more question related to my original example.  It appears that removing the short 0.001 second do-nothing tweens prevents the call tweens from triggering when the progress is reset to 0.  Is this the expected behavior, and is there a way to change this?  I'd like to have the call tweens triggered when the progress is reset to 0 (as it is with the do-nothing tweens), but including even tiny do-nothing delays is making it possible for me to seek  (with a gui slider) to these positions between the call tween and the following animation... which is a bit unsightly in my app.

 

[PointC]

That's by design. The .call() at the end of the timeline fires when the playhead arrives at that time — not when it leaves. That's why that tiny empty tween after the .call() makes it behave as you'd like — the playhead triggers the .call() each direction. That's the solution I'd recommend. 

 

It may not seem like it makes sense, but imagine a yoyo tween. If you had a .call() at the end of that tween/timeline, it would fire twice in rapid succession. That probably wouldn't be what most people would want. 

 

Make sense? Happy tweening.