Master timeline concept - adding delays to when each animation is called

[redrooster]

Hi all,

 

I was hoping you could solve this problem I am having, I have read through the forums but cannot seem to find an answer / logical solve to the following:

 

I have a series of functions that each have a part of an overall animation. I am using a master timeline to add each of these two, so that they fire in series.

 

I want to add a delay between when one finishes and the next starts, here is a simplified example of what I need:

 

master.add( showImage())
   //I would like to set a delay here until 'fadeImage' starts
   .add( fadeImage(), "showText")
   .add( showText(), "showText") 


function showImage() {
   var tl = new TimelineMax();
   tl.set(bgImage, {opacity: 0, scale: 1.2});
   tl.to(bgImage, 2, {opacity: 1, ease: Sine.easeOut}, "sweepIn");
   tl.to(bgImage, 1, {scale: 1, ease: Sine.easeOut}, "-=2");
   return tl;
}

function fadeImage() {
   var tl = new TimelineMax();
   tl.to(bgImage, 2, {opacity: 0.1, ease: Sine.easeOut});
   return tl;
}

function showText() {
   var tl = new TimelineMax();
   tl.set(title, {opacity: 0, scale: 1.5});
   tl.set(subHead, {opacity: 0, scale: 1.5});
   tl.to(title, 2, {opacity: 1, scale:1, ease: Sine.easeOut}, "sweepIn");
   tl.to(subHead, 1, {opacity: 1, scale: 1, ease: Sine.easeOut}, "-=2");
   return tl;
}

Thanks,

 

[majorkusanagi]

master.add(fadeImage(), '+=1') // delay by one second

Would this work? what's the string 'showText' for?

[Carl]

majorkuanagi, "showText" is a label. Totally valid. Labels are used in many of the timeline methods. Checkout the examples in add() http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/add/

 

 

redrooster, you can add a position parameter as majorkuanagi suggested. In this case it makes the most sense to add your label where you want it with proper positioning then add the timelines at that label.

 

if you want fadeImage() and showText() timelines both added at the same label 2 seconds after showImage() timeilne do

 

master.add( showImage())
  .add("showtText", "+=2") // add label 2 seconds after showImage()'s returned timeline is done
  .add( fadeImage(), "showText")// add at showText label
  .add( showText(), "showText") // add at showText label

Definitely check out the video on the position parameter: http://greensock.com/position-parameter