Splittext wrap lines in lines?

[therddlr 6 Likes (Newbie)]

Hello!

 

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

 

https://thisiscrowd.com/

https://www.makereign.com/studio

 

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

[therddlr 6 Likes (Newbie)]

I made this function

 

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

 

And then loop throught splitText output. Seems like solution!

[Shaun Gorneau 1,836 Likes (Superhero)]

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

 

[PointC 11,186 Likes (Superhero)]

You can split twice like this:

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

Happy tweening.

 

[Black Ducas 3 Likes (Newbie)]

On 12/23/2018 at 5:44 PM, PointC said:

You can split twice like this:

Happy tweening.

Hi

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?

[ZachSaucier 6,069 Likes (Superhero)]

@Black Ducas Please make a minimal demo of the issue.

[PointC 11,186 Likes (Superhero)]

A demo would be great @Black Ducas. Here's my demo from above updated to GSAP 3. Seems okay to me.

See the Pen 89f25b8790979573846704db96ebed43 by PointC (@PointC) on CodePen