stvn

Thank you @Sam Tremblay for replying and sharing. I'll check this out.

Hi @mvaneijgen thank you for your reply. So essentially I want to have a heading / paragraph that animates similar to how it's done on this website https://propel.me/ (the H2 heading under the first big image). That seems to be split over several lines, yet each line is also wrapped in an overflow wrapper. I thought that's what I'd be able to achieve with Split Text. Obviously I understand the animation I have on my demo is nothing like it (i can sort that) but it was more about how the lines appear from within their own wrapper, if that makes sense, without creating them as separate headings in order to do that.

Hi all, I'm new to GSAP so i apologise if this is a stupid post, but I'm struggling to get Split Text to work when a heading is over 2 lines. Here's a basic example (ignore the styling & animation, It's only to test) https://stevens-test-site-bd718d.webflow.io/home-copy It works fine if the heading is on one line (reveals out of its container etc) and I understand how that works. But when it's a heading over 2 lines like the example, the first line doesn't get wrapped. Have I totally misunderstood what Split Text does?. I know I could wrap a heading in a div, set overflow to hidden and repeat again with a second heading underneath, but I thought using Split Text was there to avoid doing it this way? Have I got this totally wrong? Below is the script I used <script> let mySplitText = new SplitText(".split", { type: "lines"}); let lines = mySplitText.lines; gsap.from(lines, { yPercent: 105, stagger: 0.02, ease: "power4.out", duration: 1.2 }); </script> Thank you.