Splittext wrap lines in lines?

[therddlr]

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]

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]

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]

You can split twice like this:

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

Happy tweening.

 

[Black Ducas]

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]

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

[PointC]

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

[fripi]

On 12/15/2020 at 4:52 PM, PointC said:

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

Hi,

 

I was searching for almost exactly that, but I don't understand why 2 splits ?

 

And also I'm trying to figure out ow to limit the width of the line divs to the content exactly, so I did a fork of your pen :

See the Pen ZEJPPJq by fripi (@fripi) on CodePen

And starting from that point I try to have the div (with overflow:hidden;) to stop at the red lines, now they all stop at the blue one.

I tried things like like .lineChild{width:auto;} but can't figure out if it is possible...

The idea is that de text appears from the bottom or left side and then moves out to the right but disappears directly at the green bars, not further.

 

 

Have a nice day

 

 

[akapowl]

 

Hello @fripi

 

1 hour ago, fripi said:

I don't understand why 2 splits

 

I think the 2 splits is just a nifty little trick allowing each line to appear out of nowhere without having to wrap each of the lines in a wrapper with overflow: hidden 'manually'.

 

For the width-related question, try this:

 

.lineParent {
  overflow: hidden;
  max-width: max-content;
}

 

https://developer.mozilla.org/en-US/docs/Web/CSS/max-content

 

 

In this example I changed the property to tween to xPercent instead of x and set it to 101 (as I was still seeing some rudimental pixels after the tween was compelete).

 

See the Pen 06af805309bdc7864755ea987a921d4d by akapowl (@akapowl) on CodePen

 

 

[fripi]

23 hours ago, akapowl said:

 

Hello @fripi

I think the 2 splits is just a nifty little trick allowing each line to appear out of nowhere without having to wrap each of the lines in a wrapper with overflow: hidden 'manually'.

For the width-related question, try this:

.lineParent {
  overflow: hidden;
  max-width: max-content;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/max-content

Oh great thanks!

Never heard of that keyword, again I learn something very useful !

Now that's exactly what I was trying to do