Jump to content
Search Community

stagger not working

mafox296 test
Moderator Tag

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

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.
×
×
  • Create New...