Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mafox296

stagger not working

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.
×