Jump to content
GreenSock

mafox296

stagger not working

Recommended Posts

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×