Jump to content


Struggling with Split Text

Moderator Tag

Recommended Posts

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


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



Thank you.



Link to comment
Share on other sites

Hi @stvn welcome to the forum! 


Don't be worried a bout asking 'stupid' questions, we all have to start somewhere and most of the time they're not even stupid, just an other way of thinking about it. 

Your issue right here is that they're already split, so why split them again?

See the Pen PoeGqaQ by mvaneijgen (@mvaneijgen) on CodePen


It's another question if you want to split in to words with split text, but even that is easy. 


See the Pen bGMwdOm by mvaneijgen (@mvaneijgen) on CodePen


Hope it helps!


🎉 Please include a codepen next time makes it much easier for others to help you (no one can modify (or sometimes even see) code except you)

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Hi @stvn!

Put a look on that:

See the Pen JjvRGJw by sam-tremblay (@sam-tremblay) on CodePen



Just play with the ease, stagger and CSS transform of .word elements if you want more style in your reveal.


Ease Docs: https://greensock.com/docs/v3/Eases

Stagger Docs: https://greensock.com/docs/v3/Staggers

SplitText Docs: https://greensock.com/docs/v3/Plugins/SplitText


Happy Tweening!


Edited by Sam Tremblay
Add Docs
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.