Struggling with Split Text

[stvn]

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.

 

 

[mvaneijgen]

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)

[stvn]

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. 

[Sam Tremblay]

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!

Sam

Edited September 12, 2022 by Sam Tremblay
Add Docs

[stvn]

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