Greensock JS TweenMax stop at marker

[Mikael Fager]

I have created a simple banner with the following code:

var tl = new TimelineMax({repeat:3,repeatDelay:10})

 

tl.from(this.box1, .6, {scaleX:0, scaleY:0, alpha:1,ease:Back.easeOut})
    .from(this.box2, .6, {delay:-.4,scaleX:0, scaleY:0, alpha:1,ease:Back.easeOut})
    .from(this.cta, .6, {delay:.1,scaleX:0, scaleY:0, alpha:1,ease:Back.easeOut})

 

The 3 movieclip animates in but not out, the animation just restarts. I would like the animation to reverse then restart 3 times but then stop before reversing the 3rd time.  Is there a marker or label I could use to achieve this.

 

NOTE: I am new to Greensock JS!

 

Thanks


 

[Carl]

to make the timeline alternate between backwards and forwards when it repeats you can set yoyo:true in the constructor. To have it restart 3 times after the firs play try:

var tl = new TimelineMax({repeat:6,repeatDelay:0.1, yoyo:true});

play forwards

repeat 1: backwards

repeat 2: forwards

repeat 3 :backwards

repeat 4: forwards

repeat 5: backwards

repeat 6: forwards

the end.

 

And yes, TimelineMax supports labels. Please see: http://greensock.com/position-parameter

[ohem]

I think he wants to do like this example from a previous thread: 

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

 

(Animate the content in, animate it out, replay the animation twice and then on the final loop stop before it fades out again.  Not necessarily any reversing/backwards animation.)