OnComplete play next timeline

[Mikael Fager]

Hello,

 

I have this banner, which loops 3 time, and once the loops are finished I want it to play a new function.

The code is fires  the new function, but the Tween within the new function doesnt fires.

 

This is the banner: http://mikaelfager.com/sun/Casino_generic_120x600.html

 

Basically  I want to flying objects to animate in and out of the canvas 3 times but the 4th time stop within the banner.

 

 

Please let me know what I am doing wrong. Many thanks in advance.

 

 

var tl3 = new TimelineMax({repeat:2,repeatDelay:0, onComplete:endFrame})
tl3.from(this.objects, 5, {delay:0,x:-67,y:536,scaleX:.4, scaleY:.4, alpha:1,ease:Quad.easeOut})


var tl = new TimelineMax({repeat:6,repeatDelay:1,yoyo:true})
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})


function endFrame(){
    alert("Hello");
    TweenLite.to(this.objects, 1.5, {x:0,y:400,scaleX:.4, scaleY:.4,});

}
 

[CraigWheatley]

Hi there and welcome to the forums!

 

The link you provided doesn't seem to work, however from your code snippet the problem may lie with scope.

 

Your timeline tl3 can access the object, this, and so it can animate this.objects.

 

However inside the function endFrame, the object this now refers to the scope of that function, not the scope of the function/object that tl3 has access to.

 

You can read more about javascript scope here: http://www.w3schools.com/js/js_scope.asp

 

Try setting a variable to this and use that instead:

var _this = this;

function newScope() {
  console.log("I can now access", _this);
  //but 'this' is now the scope of the newScope function
}