payne199 Posted August 28, 2020 Share Posted August 28, 2020 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 More sharing options...
elegantseagulls Posted August 28, 2020 Share Posted August 28, 2020 Hi @payne199, It would be super helpful to have a minimum working example to help de-bug: I Link to comment Share on other sites More sharing options...
payne199 Posted August 28, 2020 Author Share Posted August 28, 2020 Codepen entered. Thank you for the link. Link to comment Share on other sites More sharing options...
elegantseagulls Posted August 28, 2020 Share Posted August 28, 2020 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 5 Link to comment Share on other sites More sharing options...
payne199 Posted August 28, 2020 Author Share Posted August 28, 2020 Wow! Sweet. charsClass study here I come. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now