Opacity remains zero

[Paz]

Hello there,

 

I've been using Gsap for a couple of weeks only. So any help would be much appreciated!

 

I'm doing a logo animation where boxes appear, then scale, and move. (Later I will sync the different stages to sections and a scroll trigger... let's see)

 

Each tile is a group <g> within a container <g> , all wrapped in a div#logo

 

I start the animation setting #logo{visibility:hidden; }, and then toggle with defaults opacity:0 and and tl.from autoAlpha:0. It works, but as soon as I add a stagger animation the scale stops working. Mainly because those svgs remain hidden with opacity 0. 

 

You can see what I mean by uncommenting //.from("#items > g", { y:-200, stagger:0.1}) 

 

I've tried to add "opacity" to:   .from("#Layer_9_green",  {opacity:0, scaleX:0, transformOrigin:"50% 50%"}) still with no luck.

 

Many thanks.

See the Pen xxgyRom by mar-a (@mar-a) on CodePen

[Shaun Gorneau]

Hi @Paz,

 

This is a combination of some initial values, set()s, to()s and from()s; they can come together to create unexpected results because some values are applied before the tween begins. I find in cases with several tweens in a timeline, it's best to use set() up front to establish inital property values, and then use to()s from there. Have a look,

 

See the Pen bGgmqmJ?editors=0010 by sgorneau (@sgorneau) on CodePen

 

[Paz]

Thank you so much.

Even though to, from, and autoAlpha seem pretty straight forward I'm still wrapping my heading around their meaning.

It looks much more tidier too.