Help with TimelineMax.staggerFrom with onCompleteAll

[candybanners 1 Likes (Newbie)]

Hi guys,

 

I'm having problems implementing the onCompleteAll function within my TimelineMax animation. My code looks like below

 

var tl = new TimelineMax(); 
tl
.from('.text1',0.5,{opacity:0, y:'+=10'})
.to('.text1',0.5,{opacity:0},'+=3')
.from('.text2',0.5,{opacity:0, y:'+=10'})
.staggerFrom('.footer',0.5, {opacity:0, y:'+=10'},0.2, addBirdEvent)

function addBirdEvent(){

console.log('footer animations done')

}

Problems are:

• The stagger animation runs immediately. I'm expecting it to run after the previous animation ends.
• The addBirdEvent (which is my onCompleteAll function) also runs immediately.
• I also tried using onCompleteAll: addBirdEvent but theres an error saying 'missing ) after argument list.'

What do you think is wrong with my syntax?

 

Thanks in advance!

 

 

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

The problem is that your onCompleteAll is where the position parameter should be.

 

.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) : *

 

 

 

onComplete all is the 6th parameter.

.staggerFrom('.footer',0.5, {opacity:0, y:'+=10'},0.2, "+=0", addBirdEvent)

Easy mistake to make if you are used to TweenMax.staggerFrom()

 

 

Here is a demo using TimelineMax.staggerTo() 

http://codepen.io/GreenSock/pen/XmNRmq?editors=101