Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Splittext wrap lines in lines?

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



I am trying to achieve similar text up/down transformY reveal effect as this examples





For this effect I need a parent div for every transformed element with overflow: hidden. 


I tried 


type: 'lines, lines'


But unfortunately this doesn't work. Is there any workaround?


See the Pen aPJpRd by dubdub (@dubdub) on CodePen


See the Pen aPJpRd by dubdub (@dubdub) on CodePen

Link to post
Share on other sites

I made this function


function wrap(el, wrapper) {
  wrapper = document.createElement('div')
  wrapper.className = 'text-reveal-transform-wrapper'
  el.parentNode.insertBefore(wrapper, el)


And then loop throught splitText output. Seems like solution!

Link to post
Share on other sites

Hi @therddlr,


Here is a pen showing how to both the line `y translate` and a reveal (using a parent with overflow hidden). I piggy-backed on jQuery (wrap , unwrap) to make it simple ... but you can find a native way to handle it if you are not using GSAP. Hope this helps!


See the Pen maWmxJ by sgorneau (@sgorneau) on CodePen


  • Like 4
  • Thanks 1
Link to post
Share on other sites
  • 1 year later...
On 12/23/2018 at 5:44 PM, PointC said:

You can split twice like this:

Happy tweening.


I'm trying your method to split text twice in gsap 3

let split_1 = new SplitText(".js-text", { type: "lines", linesClass: "lineChild" });
let split_2 = new SplitText(".js-text", { type: "lines", linesClass: "lineParent" });

but I get error


Uncaught TypeError: Cannot read property 'nodeType' of null

Error is caused by the second split, because removing that I get no error. Any idea?

Link to post
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.