Repeating Timeline question

[Kikovich]

Hi,

I'm trying to make a very basic animation: two labels enter the banner from the left side, stop on a specific position and then fade out. (See Codepen)

This animation should repeat three times - but the third time without fadeout. How can I create this simple animation?

Thx in advance,

Chris

 

 

See the Pen MwdmWz by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums?

 

Thanks for the simple demo. Very helpful.

 

I suggest adding a callback to the timeline right before the end fade that checks to see how many times the timeline has played. If you reach the max number of plays, pause the timeline or else keep playing.

 

timeLine = new TimelineMax({

 repeat: -1

});

 

timeLine.add(aniBlueBox, "+=1");
timeLine.add(aniWhiteBox);
timeLine.add("end");
timeLine.call(checkPlayCount);
timeLine.add(aniFade, "end+=3");
timeLine.timeScale(3)
  


var playCount = 0;
var maxPlayCount = 3;


function checkPlayCount(){
  if(++playCount == maxPlayCount) {
    timeLine.pause("end")
  }
}

http://codepen.io/GreenSock/pen/KpLmmb?editors=001

[Kikovich]

Thank you very much Carl! Simple question, simple answer

But I'm new to this - and was trying a 1.000 things and didn't get it to work!

Thx again!

[Carl]

You're welcome. 

I'm sure plenty of others will need to do something just like this. Glad you asked.