Jump to content


Multiple timelines or nested timeline?

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



Am trying to create an animation that is essentially several time lines running concurrently.

These are then controlled by a scroll or a slider.


Is it best to nest these in one master timeline object or create multiple timelines that are controlled by the slider?

Its dead easy to create multiple timelines but I wondered what the overheads of this would be and would it impact perfromance? If its best to nest the timelines some how can anyone point me to a tutorial on how to do this?




Link to comment
Share on other sites



Well this are always a good starting point:






In terms of nesting, my idea is that the more you nest the better it is. For example you have 10 different timelines, some of them might play in sequence and some others might overlap. Imagine setting the particular delays of each one in order to accommodate what you're doing and let us assume that you can get to that point, everything is working fine you show the stuff to your client and they tell you:"mhhh, you know what, why don't you make the logo animation a little bit longer", and the freaking logo animation is the second timeline, that'll mean that you have to adjust, BY HAND, the delays and durations of the other eight timelines and their particular delays, you're in for a nightmare. While if you work with nested timelines and you add every particular timeline into a label, that duration change in the second timeilne means nothing, because the timing and sequence of the rest of the animation is pushed by that amount of time automatically, in fact you can put a very cool face and said:"absolutely, just give one second", you open your code editor, adjust the timing, play the animation again and your client jaw drops to the floor (of course the jaw dropping part might not happen, but still you're going to look good).


My advice is:


1.- Nest as much as you can, if you need to put a timeline, inside a second one and then nest the second one in a master, do it, because that also will allow you to isolate any issue you could find while writing your code.


2.- Always use labels, they are incredibly helpful, specially for the scenario you indicate, when some timelines will play at the same time. Like the sample I mentioned, if you put your timelines relative to a label position your life will be incredibly simple when you need to make changes.


3.- Bookmark both the Greensock collection in Codepen and the JS API docs, I can't tell you how helpful this could be.


I hope this comes in handy.


Happy Tweening!!


  • Like 4
Link to comment
Share on other sites

In addition if you want to see how timelines are nested check out this codepen which shows how to use the add() method. 



// 3 timelines are added to the masterTimeline

.add(box2Timeline, 0.5)//starts at 0.5 seconds
.add(box3Timeline, 1)// starts at 1 second
.from(".red", masterTimeline.duration(), {scaleX:0, transformOrigin:"left center"}, 0)// starts a time of 0 and its duration matches that of the parent timeline

You will note that the position parameter's (second parameter in add() method) are absolute values: 0.5, 1. That means that the second timeline is added at a time of 0.5 and the third timeline is added at a time of 1 second.


The position parameter is VERY flexible giving you complete control over the absolute or relative offset of the start of each child timeline. 


Read more about in the add() docs

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Thanks guys.. sorry for the delay. Your comments were very helpful.

Link to comment
Share on other sites

Hi Again guys..


I've got my nested timelines running quite well and am using the scroll of the page and draggable to make them play.


So my timeline is currently like this:


data.tl.add( hideAssets(data.b0))
    .add(moveMan(data.man), 0);


And it works lovely.


But what I want to add to this is a function to trigger a repeating animation that plays indendantly of the timeline.


i.e something along the lines of

   .add(mytriggerfunction(), 0.2)


where myTriggerFunction() starts an animtion playing 20% into the tween.


Any pointers on this? is it possible?

Link to comment
Share on other sites

ok forget that....


but this on the update...


if(data.tl.progress() > 0.2){



Link to comment
Share on other sites

You can definitely add a function callback at any point in your timeline/s. add() doesn't only work with tweens, and timelines, but with arrays of tweens, labels and callbacks too. The only difference to what you wrote is to remove the parentheses from the function name, i.e.

data.tl.add(mytriggerfunction, 0.2)
Edit: Ah, you beat me to the punch. I'll just add that it would be more efficient to calculate the '20%' time, and insert a callback at that time. Saves you checking what the progress is 60 times a second for the whole duration of the timeline, then after 20% you'll be calling myTriggerFunction 60 times a second...
  • Like 2
Link to comment
Share on other sites

ah ok that sounds good. The on progress wasn't that reliable. Giving that a go now.

Thank you.

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.