won't start at the same time

[Guest newdevide]

var why = document.getElementById("why");

var firstMenu = document.getElementById("firstMenu");

 

var secondMenu = new Array()

for(a=0; a<menuTeks.length; a++){

secondMenu[a] = document.getElementById("navTek_"+a);

}

 

var t1 = new TimelineMax();

t1.append([

new TweenLite(firstMenu, 3, {css:{left:ww-200, top:wh-40, opacity:1}, ease:Expo.easeOut}),

new TweenLite(why, 3, {css:{left:ww-160, top:wh-60, opacity:1}, ease:Expo.easeOut}),

new TweenLite(secondMenu[0], 2, {css:{opacity:1}}),

new TweenLite(secondMenu[1], 2, {css:{opacity:1}}),

new TweenLite(secondMenu[2], 2, {css:{opacity:1}}),

new TweenLite(secondMenu[3], 2, {css:{opacity:1}}),

new TweenLite(secondMenu[4], 2, {css:{opacity:1}})

])

 

the above is the script that i make. But the third animation and so on is run after the first two is completed. Why is that? Don't they supposed to run at the same time?

Oh and by the way. Is there a way to shorten the script for the third and above animations?

[Carl]

I think it is an illusion that the first 2 tweens start first because the ease:Expo.easeOut is a very strong ease and it move faster than the others at the beginning. remove the ease and see how it looks.

 

yes, you can tween a whole array of objects with 1 tween (new in v12)

 

TweenLite.to(secondMenu, 2 {css:{opacity:1}});

 

enjoy.

[Guest newdevide]

Carl, once again thx a lot man. You're right, the ease was the prob that cause it to run a bit late. One more question:

With the script that you gave me,

 

 

TweenLite.to(secondMenu, 2 {css:{opacity:1}});

 

Can i still put delay between each one of them? I tried putting delay:2. But it effected all of them.

[Carl]

if you want to stagger them (delay in between or overlap) use TweenMax.staggerTo()

 

http://api.greensock.com/js/com/greensock/TweenMax.html#staggerTo()

 

And yes, you are very welcome. Thanks for expressing your appreciation!

 

-c