Jump to content


End of line Splittext

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


please check this out: http://approvals.ogilvyinteractive.co.nz/textAnims/textAnim_dynamic_mask/index.html


I'm trying to make a responsive 'mask' that hides all but the selected words. It's mainly working but I can't seem to find the end of the 'line' so I can add a div to fill in the gaps on the right!?

Any pointers greatly appreciated.




Link to comment
Share on other sites

Hi @NDF. Is there any chance you could provide a reduced test case in codepen please? Just the smallest amount of code possible to reproduced the issue - it's just really awkward to try to troubleshoot a live web site like that. 


And if you could boil your question down, are you asking how to use SplitText to split something up by "lines" and then calculate where the end of that resulting <div> is? 

Link to comment
Share on other sites


thanks for the reply and apologies for the lack of a Copepen - lack of time and now access to the source code!

But basically yes; I'm having trouble finding the end position of the <div>s in the 'lines' array. No issues with the 'words' array but the offsetWidth etc don't seem to work with the 'lines'?




Link to comment
Share on other sites

Sure, Andy, once you can get us a reduced test case in codepen I'd be glad to take a look. This doesn't really sound like a GSAP/SplitText question, though. 

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.