Jump to content
Search Community

Split Text question

retropunk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys, if I have an H1 tag and it has 4 lines of text, can I mask it like this with SplitText?

This animates each line but is there a way to mask the lines with SplitText? (hope, hope)

Like a trick with overflow hidden on each line?

tl.staggerFrom(mySplitText.lines, 0.25, {autoAlpha: 0, y: 10}, 0.12);




  • Like 1
Link to comment
Share on other sites

Sorry, I didn't realize you only wanted lines. I thought you were gonna animate the individual characters and/or words up from the lines. If you only want the lines, I'd probably split the text twice and set the outer div overflow to hidden. Maybe something like this.


See the Pen pxBMvy by PointC (@PointC) on CodePen

Does that help?


Happy tweening.





  • Like 7
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...



Please see in PointC's example this code:


var tl = new TimelineMax({repeat:-1, repeatDelay:0.5, yoyo:true});
tl.staggerFrom(".lineChild", 0.75, {y:50}, 0.25);


repeat:-1 means repeat forever. You can change it to 1 to have it repeat once. That means the text will come into view and then leave.

If you want it to just come into view just remove all the code related to repeating (repeat, repeatDelay, and yoyo).


var tl = new TimelineMax();
tl.staggerFrom(".lineChild", 0.75, {y:50}, 0.25);




  • Like 2
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.
  • Create New...