Two-lined headline hides only the last part / Simple SplitText Animation

[yarek]

I'd like to create a simple text animation, as in this GSAP example:  https://gsap.com/text/#:~:text=Animate Text on Scroll 

The headline should be hidden until I scroll. 
The whole script works pretty well once there is no second line. See my codepen section 2 (! wrong) and section 3 (correct, but only one line). 

Do I really need to create two separate div containers and split the text manually to do this? The headlines in my project are generated dynamically. 
Am I missing some css classes or is my HTML structure the problem?

It would be nice to get some help or hints on what is wrong with this code.

See the Pen qEEmrqv by yarekdev (@yarekdev) on CodePen.

[Rodrigo]

Hi @yarek and welcome to the GSAP Forums!

 

What you can do is split for words and lines and give the lines a class that has overflow: hidden in order to hide the words of each line as you expect:

const mySplit = new SplitText(headline, {
  type: "words, lines",
  linesClass: "split-line",
});

.split-line {
  overflow: hidden;
}

Here is a fork of your demo:

See the Pen jEELwmo by GreenSock (@GreenSock) on CodePen.

 

Finally thanks for being a GSAP Club member and supporting GSAP! 💚

 

Hopefully this helps

Happy Tweening!