Jump to content
Search Community

Nested Timelines

anthonygreco 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

Hi all,

 

I've recently created a long animation by way of manually adding a whole bunch of individual tweens to one timeline along with delays so that everything lines up. I've since realized that nested timelines is the better way to this, especially since 98%of the animation I'm building is extremely sequential, though I should say that there are some places I'd like one timeline to overlap another, but I believe I can simply use an offset (instead of delays) on individual timelines that need a slight shift forward or back in the timeline. So i understand the concept here, but in my implementation I'm not getting sequential animation of the sequence. Instead I see everything run at once in sync. Here's a jsfiddle showing how I'm building the individual and main timelines. It may seem like there's a lot going on, but you can probably disregard most of the first few vars at the top of the fiddle (which are just param data and drawing methods), the timeline specific logic is at the bottom. I should state, that while there are two of the "banners" displayed there, which should animate sequentially, the elements of the banner should also be sequential. Looking at the structure of the json data (arrays split based on where they should live in a nested timeline) you'll see I want the first line (top left corner) to animate then the top box line and the bottom box line together then the text and the last line (bottom right corner) animate. Making a total of 3 timelines for each banner. Again, I know there may be a bit of code here but I've stripped this down as far as I can get without leaving all of the aspects in for everyone to understand what the goal is. Feel free to ask me for me questions for more clarity anywhere, etc.

Link to comment
Share on other sites

I haven't had time to look at everything in-depth, but I did notice something right away which may be the problem:

 

Instead of adding the timeline itself to the parent timeline, you're adding a callback that creates the animation. A callback literally takes no time whatsoever (it's just a function call), so if you add() a bunch of them in sequence, they'd all get called on the same frame, thus they'd start at the same time. 

//BAD:
tl.add(function () {
    animatePath(item);
});

//GOOD: 
tl.add(animatePath(item));

Does that make sense? In the second version, the actual tween/timeline is getting properly nested into the master timeline whereas the first one only has a zero-duration callback which itself creates the tween. The other bad thing about that approach is if you rewind/restart the master timeline, that callback would get called again and a duplicate tween/timeline would get created. It'd still play fine - I'm just saying it's recreating something unnecessarily. 

//these would all start at the same time because they're just callbacks:
tl.add(function() {
    TweenLite.to(...);
}).add(function() {
    TweenLite.to(...);
}).add(function() {
    TweenLite.to(...);
});

//whereas these would be properly sequenced (and the same would apply for nested timelines too):
tl.add( TweenLite.to(...) ).add( TweenLite.to(...) ).add( TweenLite.to(...) );
Link to comment
Share on other sites

Blast. I do see what you're getting at. Looks like I'll need to rethink this entire thing then since the method is what's actually doing the progressive path animation of the strokes. I'll be fiddling on a fork of the fiddle I posted here so if anyone else comes across this and feels like taking a stab they can. Thanks for the quick reply Jack! Any other ideas/suggestions are greatly appreciated.

 

EDIT: So the animatePath method actually does return the path animation tween (and shows it's a tween object upon logging it) but when I remove the anonymous function encapsulation I get an error:

 

Uncaught Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.

 

Updated Fiddle Here

Link to comment
Share on other sites

Once you grasp the concept of nesting timelines (which is actually quite easy) and modularizing your animation code into functions, it's a very powerful thing and can completely change your animation workflow. 

 

That's exactly technique I used to do the animation on the home page which you can see in a codepen here: http://codepen.io/GreenSock/pen/b9133e0af7101adb4d7517f10b34c3ed

 

So it becomes kinda like:

tl.add( firstPart() )
  .add( secondPart(), "-=0.5") //overlap 0.5 seconds
  .add( thirdPart(), "+=1") //leave a 1-second gap
  .add( fourthPart());

//and then you can easily preview things during production by skipping to a particular part:
tl.seek(5); 

Then updates are super easy. You can tweak things inside secondPart() and even if the duration changes, that's fine - everything in the master timeline adjusts. 

 

Again, very powerful once the light bulb goes on. 

 

Have fun!

  • Like 3
Link to comment
Share on other sites

AHHH!!! My hero! LMAO. Thanks man, I literally just came back to the post to say I found the same. Damn antsy, impatient programmers! ::looks at himself:: Clearly I have a bit of cleanup to do, but this is a working example for anyone else that comes along.

 

http://jsfiddle.net/anthonygreco/4Fqnw/

 

Thanks again Jack! And keep up the great work with GSAP! We're all very grateful. :D

 

EDIT: Once again I jumped the gun :P, got a couple issues to work out here, but I'll be sure to post an updated fiddle upon completion as this took me a bit of time to figure out so hopefully it'll help someone else in the future.

Link to comment
Share on other sites

I thought I had offsets working yesterday, and I can't see that I've made any relative changes, but for some reason the offsets aren't working as expected. This fiddle has an offset on the last two items (which are in the same index in the params array and therefore added to the timeline together) but the offset doesn't seem to be offsetting, instead it seems there's a delay at the end of that timeline. You can visually see it best by watching the progress slider or moving the offset to one of the middle timelines (i.e. id == 'line2' or 'line3') you can see the "delay" in the animation itself. Am I just doing something silly here again? (::smh:: at the undefined error above :shock:)

 

FYI, for anyone else who stumbles upon this post, this latest fiddle, while issues still exist with the offset does resolve some other display bugs found in the previous fiddle I discovered after adding the slider.

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