Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Todd Shelton

Opacity in StaggerTo

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

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

Link to comment
Share on other sites

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.

:)

  • Like 5
Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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

 

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

 

Todd

  • Like 2
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.

×