autoAlpha to many elements

[Ava 1 Likes (Newbie)]

Hi,

 

How do I  set autoAlpha to many elements at the same time?

 

I would like to fade out all the (.to ) together.

 

 

the code is :

 

tl.from(copy1, 1, {autoAlpha:0,ease:Power4.easeNone})
    .from(hemma1, .1, {delay:0.6,autoAlpha:0,ease:Power0.easeNone})
    .from(hemma2, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
    .from(hemma3, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
    .from(hemma4, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
 
    .from(system1, .1, {delay:0.5,autoAlpha:0,ease:SteppedEase.config(1)})
    .from(system2, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
    .from(system3, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
    .from(system4, .1, {autoAlpha:0,ease:SteppedEase.config(1)})
 
    .to(copy1, .5,{autoAlpha:0,ease:Power2.easeOut})
    .to(hemma1,.5,{autoAlpha:0,ease:Power2.easeOut})
    .to(hemma2,.5,{autoAlpha:0,ease:Power2.easeOut})
    .to(hemma3,.5,{autoAlpha:0,ease:Power2.easeOut})
    .to(hemma4,.5,{autoAlpha:0,ease:Power2.easeOut})
 
    .to(system1,.5,{autoAlpha:0,ease:Power2.easeOut})
    .to(system2,.5,{autoAlpha:0,ease:Power2.easeOut})
    .to(system3,.5,{autoAlpha:0,ease:Power2.easeOut})
    .to(system4,.5,{autoAlpha:0,ease:Power2.easeOut})

 

 

thanks

 

 

 

[joe_midi 238 Likes (Specialist)]

You can actually pass an array to the target parameter, which would do all of those elements at the same time.

tl.from(copy1, 1, { autoAlpha:0, ease: Power4.easeNone })
    .from(hemma1, 0.1, { delay: 0.6, autoAlpha: 0, ease: Power0.easeNone})
    .from([hemma2, hemma3, hemma4], 0.1,  {autoAlpha: 0, ease: SteppedEase.config(1) })

    .from(system1, 0.1, { delay: 0.5, autoAlpha: 0, ease:SteppedEase.config(1) })
    .from([system2, system3, system4], 0.1, { autoAlpha: 0, ease: SteppedEase.config(1) })

    .to([copy1, hemma1, hemma2, hemma3, hemma4], 0.5, { autoAlpha: 0, ease: Power2.easeOut })

    .to([system1, system2, system3, system4], 0.5, { autoAlpha: 0, ease: Power2.easeOut });

Another method of making animations occur at the same time is to give them the same position with a label.

tl.from(copy1, 1, {autoAlpha:0,ease:Power4.easeNone})
    .to(hemma1, 0.5, { autoAlpha: 0, ease: Power2.easeOut }, 'fadeOut')
    .to(hemma2, 0.5, { autoAlpha: 0, ease: Power2.easeOut }, 'fadeOut')
    .to(hemma3, 0.5, { autoAlpha: 0, ease: Power2.easeOut }, 'fadeOut')
    .to(hemma4, 0.5, { autoAlpha: 0, ease: Power2.easeOut }, 'fadeOut')

[Ava 1 Likes (Newbie)]

Hi Joe_midi,

 

Thanks a lot for these feedback

 

Would system2, system3 and system4 fade in together or step by step if I use an array?

 

.from([hemma2, hemma3, hemma4], 0.1, {autoAlpha: 0, ease: SteppedEase.config(1) })

 

 

I want the .from tweens to fade in step by step  but want them to fade out together at the same time.

 

Best,

Ava

[Carl 9,066 Likes (Superhero)]

an Array of elements will animate at the same time if you use from() or to().

 

If you want them stagger (one after the other, or slightly overlapping) you would use staggerTo() or staggerFrom()

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/staggerTo/

[Ava 1 Likes (Newbie)]

thank you Carl

this was helpful