stagger not working

[mafox296 1 Likes (Newbie)]

The code pen contains two simple staggers. The first contains a superfluous obj1.  Neither versions seem to work. What am I missing?

Thanks

See the Pen wzJmYV?editors=1111 by mafox (@mafox) on CodePen

[Carl 9,066 Likes (Superhero)]

The problem was that you were setting the parent container div "#title1" to have autoAlpha:0 and then you are fading the child span elements from autoAlpha:0.

Since title# had autoAlpha:0 the children remained invisible.

 

I think this is what you want:

 

var $title1 = $('#title1');


$title1.html($title1.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " "));
var obj1 = $title1.find("span");


TweenLite.set("#title1", {opacity:1})
TweenMax.staggerTo(obj1, 0.5, {
  autoAlpha: 1,
  ease: Power2.easeOut
}, 0.2);

 

http://codepen.io/GreenSock/pen/bwqrrg

 

Also be careful with your CSS selectors you had #Title1 span instead of #title1 span

[mafox296 1 Likes (Newbie)]

Thanks, but that has not changed the behavior: the stagger doesn't appear to be working. 

[Carl 9,066 Likes (Superhero)]

Are you saying you didn't see my demo link working above? I just double checked and it looked perfect.

[mafox296 1 Likes (Newbie)]

It still doesn't stagger. Is this perhaps something to do with the CSS?

I've made a small pen containing your code. The weird thing is that I have some other code where a similar tween works.

      

See the Pen YGVQva by mafox (@mafox) on CodePen

[ohem 324 Likes (Leader)]

It still doesn't stagger. Is this perhaps something to do with the CSS?

I've made a small pen containing your code. The weird thing is that I have some other code where a similar tween works.

      

See the Pen YGVQva by mafox (@mafox) on CodePen

You're missing opacity:0; in the CSS.  Carl's example works fine: 

See the Pen bwqrrg by GreenSock (@GreenSock) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Nice catch Ohem