Delay on FirstRun Only

[celli]

I am trying to create a delay on a master timeline, which is comprised of about 20 GSAP timelines. But I really only want the delay to fire the first time it runs, so every other time the master timeline plays it would loop without the delay.

 

This codePen is not simplified, and there is a lot going on, so I am testing--but maybe you can still see the master timeline at the bottom of the JS to help with a delay that runs on the first-time the master timeline plays only.

See the Pen yNmGdo?editors=001 by celli (@celli) on CodePen

[Shaun Gorneau]

I would initially pause the timeline and set it to repeat infinitely 

var masterTimeline = new TimelineLite( {paused: true, repeat: -1} );

Then, just use setTimeout to delay masterTimeline.play()

 

EDIT

 

I didn't notice it was a TimelineLite instance ... that will have to be a TimelineMax instance to use the repeat property.

var masterTimeline = new TimelineMax( {paused: true, repeat: -1} );

[Shaun Gorneau]

See the Pen dYbVQP?editors=001 by sgorneau (@sgorneau) on CodePen

[Diaco]

Hi celli 

 

pls provide Reduced/Simple Codepen demo as possible , and if you want to use TimelineLite pls try like this :

var tl = new TimelineLite({ delay:3 , onComplete:function(){ this.restart() } });

or

var tl= new TimelineLite({ onComplete:function(){ this.restart() } , paused:true });

TweenLite.delayedCall( 3, function(){ tl.play() } );

 

[celli]

Great!! Two perfect examples and so simple, thanks Diaco and Shaun!

[pixeldroid]

See the Pen dYbVQP?editors=001 by sgorneau (@sgorneau) on CodePen

Cool!