SplitText breaking lines on span (inconsistently)

[MeLight]

Hi guys,

 

I'm doing an engine for text animations. Worked great till I introduces some font-size changes. The attached code pen shows the basic code (supposedly same code as the breaking code). But I couldn't reproduce the probelm in the codepen.

 

Structure looks like this:

<span>emoji code</span> Sale text goes here <span>emoji code</span>

 

When applying certain font-size (smaller!), the emoji spans (i tried text as well) are converted to separate lines by SplitText. Attaching two links where the problem shows:

 

http://mega-sale-qa.appspot.com/bars/preview?&effect=wave-explode&emoji=0x1f385&font_size=35 - font size 35 (all good)

http://mega-sale-qa.appspot.com/bars/preview?&effect=wave-explode&emoji=0x1f385&font_size=32 - font size 32 - makes lines!

 

Please advise. Thanks

 

See the Pen GRJzvVe by melightk (@melightk) on CodePen

[ZachSaucier]

Hey MeLight. Does the problem still occur if you use no styling or custom font? i.e. if you just load the straight HTML?

[ZachSaucier]

The problem does occur for me sometimes in the CodePen but it's gone when I remove your CSS, especially the custom font. 

 

I bet if you wait for the custom font to load it will work as expected:

document.fonts.ready.then(waveExplode);

 

[MeLight]

Hi Zach,

 

thanks for quick reply. Your suggestion unfortunately, didn't help. But, I've been able to reproduce the issue in a codepen! So here it is:

[ZachSaucier]

This seems to be because of the different font sizes. I think it's probably a bug of some sort. Here's a more minimal repro: 

See the Pen dyoaKEx?editors=0010 by GreenSock (@GreenSock) on CodePen

[MeLight]

That's a major bummer. Is there a way to work around it? I tried substituting emoji's with images, but images will not animate at all because split text doesnt catch them.

[ZachSaucier]

To work around it, you could use splits on multiple elements (notice the HTML changes):

See the Pen QWbYBZV?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

I'm looking into it, but the problem is that you're using a different font-size that triggers it to be interpreted as a different line (because the top of the containing <div> is sufficiently different, past the threshold). For now, you could split with type: "words,chars" only, and then run your own logic to split that up by lines (if necessary). But again, I'm looking into a baked-in solution. This is definitely an edge case that I don't remember seeing in all the years since SplitText was introduced, but I have an idea that may work but it'll take some time to attempt. I'll get back to you as soon as I can. 

[MeLight]

chars and words is actually an awesome workaround - I don't have any use for lines in the animation. Thanks! And I'll be waiting on the fix update