Opacity in StaggerTo

[Todd Shelton 2 Likes (Newbie)]

This is so simple that I have to be missing something easy. 

 

I'm setting the paragraph element to an opacity of 0; 

Then I'm splitting the text into words. 

I'm then just trying to stagger the words to an opacity of 1. I can't get this to work. I can make it staggerTo opacity of 0 but not the other way around. Here is my Codepen. 

TweenMax.set("p", {opacity: 0});

var text = new SplitText("p", {type: "words"}),
    words = text.words;

var tl = new TimelineLite({delay: 1});
tl.staggerTo(words, 1, {opacity: 1}, 0.1);

See the Pen YZQPwd by trshelto (@trshelto) on CodePen

[PointC 8,599 Likes (Superhero)]

HI Todd Shelton 

 

Welcome to the GreenSock forum and thank you for being a Club member. 

 

The reason that doesn't work is you're setting the opacity of the <p> tag to 0 before you split the text. This certainly hides everything as you'd expect, but the SplitText plugin puts each word into its own div. The stagger is actually working, but each div is a child of the <p> tag and that still has an opacity of 0 so it looks like nothing happened. You can check the inspector to see all the divs after the split. The easiest fix would be to set your words to an opacity of 0 after the split like this:

var text = new SplitText("p", {type: "words"}),
    words = text.words;

TweenMax.set(words, {opacity: 0});

var tl = new TimelineLite({delay: 1});
tl.staggerTo(words, 1, {opacity: 1}, 0.1);

// you could also not set the opacity of anything and just use a from() tweeen
var tl = new TimelineLite({delay: 1});
tl.staggerFrom(words, 1, {opacity: 0}, 0.1);

Hopefully that makes sense and helps.

 

Happy tweening.

[mikel 1,823 Likes (Superhero)]

Hi Todd,

 

you could use staggerFrom: 

See the Pen wJeaRj by mikeK (@mikeK) on CodePen

 

If you want to hide the paragraph before use:

See the Pen vxZORg by mikeK (@mikeK) on CodePen

 

Best regards

Manfred

 

 

Hi PointC,

 

your explanations are great.

 

Manfred

[Todd Shelton 2 Likes (Newbie)]

Thank you @PointC and @mikel. That makes perfect sense. 

 

The solution you give makes perfect sense. Thank you again. 

 

Todd