Dynamic Length Timeline

[amo6002@gmail.com]

All,
Is it possible to have a controllable GSAP timeline whose length is unknown on initial loading?
  Trying to get my head around the GSAP timeline and animations.  I am excited by what I see and am eager to put it to work.
  
  I would like to create and populate a timeline with a json file.  Each main json object contains an array with one to many sub objects
Pseudo Data:
 { id: aa1, name:alpha,    color:green,    startimeoffset: 56,             actions:[{action:1,duration:15,color:green},    {action:2,duration:30,color:red},    {action:3,duration:10,color:purple}  ]},
 { id: aa2, name:beta,    color:red,        startimeoffset: 10,         actions:[{action:1,duration:22,color:blue},        {action:2,duration:12,color:aqua},    {action:3,duration:25,color:green}  ]},
 ...
 
 On the first pass, to initiate the run, I want to iterate through the main json array and load all of the first "actions" objects (those with an action of 1) by cloning some svg elements into the timeline with a callback to load the next actions object onComplete.  So onComplete, actions with an action id of 1 will call 2, 2 will call 3...  The same svg element created on initial load will be positioned and animated based on the active actions object.

 I anticipate putting user specified configuration options in that may shuffle the actions based on user inputs changed prior to starting the timeline, but I need the baseline json file to remain "static" with actions sequenced or filtered out during execution based on the configuration options.  As an example after action 1 plays, 2 is called, but 2 does not meet the current criteria and is set aside and 3 is evaluated and loaded to the timeline.

 Is it possible to have a controllable GSAP timeline whose length is unknown on initial loading?  I keenly want to use the playback controls on the timeline.  It seems that when I load the timeline with the first actions from each main json object, the timeline seems to set its total duration to the amount of time required to run the initial actions objects without expanding to accommodate the follow-on animations.  It seemed also that the timeline playback indicator value maxed out at 1000.  I tried the recommendation of .set(
 
 Also, is there a troubleshooting methodology/and or tools to help see why things are not going as desired?  I am using chrome with the developer tools on and can see my svg elements getting created and positioned,,see the code excuted and the active variables durring debugging, but often elements often fail to animate and I do not get failures or clues as to why I am watching things run out with no animation.
 
 Any assistance and clarity is much appreciated.
 
 Thanks much,
 Laurin

[Carl]

Thanks for the question. 

Any chance you can provide a reduced demo that illustrates what the problem is? I'm not quite following everything.

Timelines are very flexible and you can add animations to them at any time. Is your question to specific to GSDevTool? I wasn't quite sure.

 

If you you are using GSDevTools, you can just fork this demo and add your own code

 

See the Pen MEYxBZ by GreenSock (@GreenSock) on CodePen

 

We don't need to see JSON files loading or advanced user interactions. Just a simple simulation will do. Thanks!

 

[amo6002@gmail.com]

Thanks for the quick response Carl.  I will get there with the codepen.  What I have found out so far is the GSDevTools does not show the complete timeline I had created.  When adding tweens to the master timeline I had position values like 4609 associated with the tweens, but the value on the display  caps at 1000.  I checked the totalDuration value of the timeline and it shows it running out to 4609 so it appears once I put my own timeline controls in place I will break the 1000 barrier.  I was concerned with having to work with a timeline of a fixed duration, but it does not appear to be a problem.

 

Thanks again.

[GreenSock]

Yeah, sorry about that - I put that 1000-second limit on GSDevTools to avoid situations where crazy long (like infinite) timelines couldn't really be controlled intuitively (imagine dragging 5 pixels and that making the timeline shoot ahead by thousands of seconds). I didn't really think folks would intentionally go beyond 1000. You should be able to simply set a "maxDuration" vars property to override that if you'd like, like GSDevTools.create({..., maxDuration:5000});

 

Does that help? 

[amo6002@gmail.com]

Thanks for the response Jack.  It does help.   I was more concerned with the timeline itself getting capped.  Knowing it was just the GSDevTools helps immensely.  I am sure people are using your work way beyond the original intent.  So far it is everything I thought it would be.