fripi Posted September 21, 2022 Share Posted September 21, 2022 Hi, I'm trying to kind of animate a code typewriting. I'm using <pre> to layout the text and it starts well, but after 3 lines it doesn't respect any layout anymore and just put everything in one line any clues ? thanks See the Pen KKRvaNm by fripi (@fripi) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted September 22, 2022 Solution Share Posted September 22, 2022 Yeah, that's not really what SplitText is intended for - you've got a bunch of nested elements intermingled with text content. You could make it work by wrapping all the content in sub-nodes consistently (rather than mixing and matching). Wrap the "loose" stuff in <span></span> like: See the Pen mdLMxwb?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
fripi Posted September 22, 2022 Author Share Posted September 22, 2022 2 hours ago, GreenSock said: Yeah, that's not really what SplitText is intended for - you've got a bunch of nested elements intermingled with text content. You could make it work by wrapping all the content in sub-nodes consistently (rather than mixing and matching). Wrap the "loose" stuff in <span></span> like: Thank you Jack, luckily it's a short snippet that needs to be animated So it was already very packed and by adding a lot of spans it works 🤪 it's great I love that plugin 1 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