Jump to content
GreenSock

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

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

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

Link to comment
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)
  wrapper.appendChild(el)
}

 

And then loop throught splitText output. Seems like solution!

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

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?

Link to comment
Share on other sites

  • 11 months later...
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.

 

demo.jpg.b39e22aa613aa9923c241254c3eb2fc1.jpg

 

Have a nice day

 

 

Link to comment
Share on other sites

 

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

 

 

  • Like 4
Link to comment
Share on other sites

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 

  • 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.
×