GSAP SplitText plugin issue on FireFox

[Weichie]

Hello,

 

I am using the SplitText plugin to split the lines of my titles. I'm not doing any animations actually, just using this functionality of gsap to split my text into different lines. Making it easier to add additional styling to those lines.

 

It works great in chrome and safari. But in FireFox, the splitText is not working. It does add the class "split-lines", so the script is triggered correctly. But it does not split it into different lines like it does in other browsers. If you open the codepen example in chrome and firefox, and you inspect the elements, you can see that in firefox just warps the entire thing in 1 '.split-lines' span.

 

Is there a fix for this on firefox or am I missing something or doing something wrong here? If you're reading this question in chrome or safari, you will see a working example below. If you're in firefox, you'll see a broken example.

 

Thanks in advance!

 

See the Pen oNqxZMJ by Weich (@Weich) on CodePen

[GreenSock]

That's probably because you're trying to put <div> elements into a <span> element that's display: inline. Just use a <div> instead or don't wrap it in a <span> at all:

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

 

Thanks for being a club member, @Weichie! 🙌

[Weichie]

Awesome! Thank you for the quick and obvious solution!