Changing inline styles to SplitText

[Tony Geek]

Hi all,

I'm wondering if there's any way to adjust the inline styles of SplitText, or perhaps another method in order to achieve my desired result.

SplitText's masking works by adding a overflow: clip on to the text. This applies both on the x axis and on the y axis. My problem is that I would not like the x axis to be clipped, as I only animate my text on the Y axis and for responsiveness, I can live with text overflowing on the x axis. Are there any ways this can be achieved?

See the Pen azZZdoO?editors=1010 by tonycre8-the-bold (@tonycre8-the-bold) on CodePen.

[mvaneijgen]

It seems the CSS spec does not allow one of the properties to be visible and the other to be hidden. The other will be set to auto as soon as one is set to clip/hidden https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow, there is nothing GSAP can do about that. 

 

A solution I thought overwriting the default mask SplitText is making and setting it to visible again. And then creating a clip path that still clips the bottom, but is way longer then any word can be. I've set it to 999% and it seems to work. 

 

Hope it helps and happy tweening! 

 

See the Pen QwEENVG?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen.

[Tony Geek]

1 hour ago, mvaneijgen said:

It seems the CSS spec does not allow one of the properties to be visible and the other to be hidden. The other will be set to auto as soon as one is set to clip/hidden https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow, there is nothing GSAP can do about that. 

 

A solution I thought overwriting the default mask SplitText is making and setting it to visible again. And then creating a clip path that still clips the bottom, but is way longer then any word can be. I've set it to 999% and it seems to work. 

 

Hope it helps and happy tweening! 

 

Thanks for the pointers. Adding the line class does seem to do the trick, and as the default class over the mask is.lines-mask, we can target that.

Perhaps I didn't get across what I meant so clearly, as looking at your adjustment the solution to my problem seems really simple. Just add overflow-x: visible!important onto the .lines-mask.

See the Pen vEKKKaX by tonycre8-the-bold (@tonycre8-the-bold) on CodePen.

[mvaneijgen]

Ha, I thought I'd tested that, but it wasn't working. Might have overlooked that. Glad it is working now happy tweening!

[Tony Geek]

I thought so - I think it was the overlay changes inside of the line itself that doesn't work. But applying it to the mask works just fine. Thought there might've been a prop I was missing like maskDirection or something, but seems pretty simple without anything like that.