GSAP SplitText for lines instead of chars

[pixelarchitect]

I am using the SplitText with Scrolltrigger to make text appear on scroll, this works well for chars and words but as soon as I want to do it per line it doesn't work well anymore. The animation still triggers but it doesn't appear from behind the white anymore (except for the last sentence). Maybe this is just a CSS solution but im not sure... Does somebody know the thing im missing?

If you change 'quote.split.lines' to 'quote.split.chars' or 'quote.split.words' you can see what I mean because those work as intended (appearing from behind white)
 

[CODEPEN WAS DELETED]

[Rodrigo]

Hi,

 

You just need to create an extra SplitText instance that wraps the lines around other container in order to apply the overflow hidden property. Right now the lines you're creating with SplitText don't have a parent element that hides them, only their main container so that doesn't get you the effect you're after.

 

This seems to work the way you expect:

See the Pen OJBLbRr by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[pixelarchitect]

@Rodrigo that indeed works! Thank you so much for explenation!