Jump to content
GreenSock

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

SplitText issue

Recommended Posts

I am putting together a simple (I thought) animation using SplitText. I am wanting a line of text to appear from left to right with a click of a button; and a line of text to disappear from left to right with a click of button. I got the appearing text to work, but I am having issues with the other. I can get the text to disappear as desired as desired, but it seems the only way I can get it to work is to have the text displaying on the screen, first. That is not what I want. I need the text to be invisible first, then appear from left to right after the button click. Here is my kinda-working code.

Please see codepen.

I have tried using css to set the opacity to zero and work from that, but I can’t get the text to appear at all from that angle. Could someone offer-up some insight?

See the Pen ZEWyEjx by don199 (@don199) on CodePen

Share this post


Link to post
Share on other sites

Hi @payne199,

 

It would be super helpful to have a minimum working example to help de-bug:

I

Share this post


Link to post
Share on other sites

Codepen entered. Thank you for the link.

Share this post


Link to post
Share on other sites

Ah! I think the issue you were having was that you weren't setting or un-setting the opacity on the split characters, but rather the whole span of text, to easier target your splitText pieces in CSS you can set a classname via charsClass and target that. I also updated the pen's code to use the gsap3 syntax, instead of the outdated TweenMax syntax.

 

See the Pen bGpRNwY by ryan_labar (@ryan_labar) on CodePen

 

  • Like 5

Share this post


Link to post
Share on other sites

Wow! Sweet. charsClass study here I come. 

Share this post


Link to post
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.

×