tlemaitre27 Posted February 19, 2020 Share Posted February 19, 2020 Hi! I have an animation that reveal my texts line by line with SplitTextJs. The problem I have is that I have my paragraphs that are splited line by line but my lines wraps so one line is now 2 lines It happen mostly when I refresh the page without the cache. On my codepen I need to refresh more than once without the cache to get the problem. Also, sometimes I have a problem with the split when I have some words in italic or in a span. Thank you! See the Pen mdJEBxE by tlemaitre (@tlemaitre) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 19, 2020 Share Posted February 19, 2020 Hey tlemaitre27 and welcome. This is likely because your font hasn't been loaded before you're trying to run SplitText. As the SplitText docs say, Quote The element of text should be displayed exactly as you want it to be at the end of your animation before you split it. In other words, the split element should be displayed on the page (having visibility: hidden or opacity: 0 is fine) and be sized like it will be when you want the split animation to run when you call SplitText. So make sure you run SplitText after the font has been loaded. Otherwise SplitText can have no idea how the lines will be split. 1 Link to comment Share on other sites More sharing options...
tlemaitre27 Posted February 19, 2020 Author Share Posted February 19, 2020 Thank you, I thought It was that but I wasn't sure, but what about the glitch when I have some words in italic (with the tags <i></i>) or span? Also, I don't know why, but my outerSplitP.lines is not set to overflow: hidden until the animation is triggered Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 19, 2020 Share Posted February 19, 2020 5 minutes ago, tlemaitre27 said: my outerSplitP.lines is not set to overflow: hidden until the animation is triggered You have paused: true on your timeline that it's on. If you want it to apply it immediately, use a regular tween: gsap.set(outerSplitP.lines, { overflow: 'hidden' }) el.tlp = gsap.timeline({ paused: true, onComplete: () => { //outerSplitP.revert() //innerSplitP.revert() } }) .from(innerSplitP.lines, { duration: 1, yPercent: 100, ease: 'expo', stagger: 0.1 }); 5 minutes ago, tlemaitre27 said: what about the glitch when I have some words in italic (with the tags <i></i>) or span? What do you mean glitch? Link to comment Share on other sites More sharing options...
tlemaitre27 Posted February 19, 2020 Author Share Posted February 19, 2020 Thank you for the tip Quote What do you mean glitch? I have a dot in a single line in my codepen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 20, 2020 Share Posted February 20, 2020 15 hours ago, tlemaitre27 said: I have a dot in a single line in my codepen This is related to you trying to split nested elements and those nested elements wrapping. There are some cases where nested elements, even if they're inline, are especially hard to know where the splits should go. In this case, when then <i> is split across two lines, SplitText doesn't know where to put the dot. Here's a demo that shows the issue more clearly: See the Pen gOpwRvo?editors=0010 by GreenSock (@GreenSock) on CodePen If the <i> doesn't wrap this issue won't occur. So in light of that, you could adjust the font size, adjust the max-width, add some text, or remove some to where this happens less. Alternatively, just include the period inside of the <i> 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