Jump to content
Search Community

SplitText issue

payne199 test
Moderator Tag

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

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