Jump to content
GreenSock

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

overflow: hidden on split-text characters

Recommended Posts

Hi, Is there a best way to achieve overflow:hidden on each character while using split text ? I have the characters in my codePen animating their y-position and would like them each to appear hidden (masked) before they animate into position.

 

I can add overflow:hidden to my css, but that would only effect the bottom line of my text. I'd like to effect each line of text, since some of the text will wrap onto multiple lines.

See the Pen VwePGwo by celli (@celli) on CodePen

Share this post


Link to post
Share on other sites

Hey celli. I covered how to create this effect in this post:

My trick is to split it twice and apply the hidden overflow on the parent split :) 

  • Like 2

Share this post


Link to post
Share on other sites

Ahh, great! I thought there would be a streamlined GSAP way. Thank you Zach!

Share this post


Link to post
Share on other sites

Hi Zach,

 

One more quick question:

 

1. I updated my codePen -- and because I am using scrollTrigger, I couldn't seem to get the animation to reverse and replay when I scrolled back up and then down again. So I removed this part, which now makes it work as expected :

 

  // Remove the extra markup when it's done
  onComplete: () => {
    splitTextTl.revert();
    childSplit.revert();
  }

Is there any harm in removing that ? I assume it's okay to leave the text split, and not revert back to the original HTML.

 

The other thing I am wondering is with split text, if I reduce the width of the browser I get words that break in the middle of a word, Is there a way to avoid that ?

 

 

Share this post


Link to post
Share on other sites
1 hour ago, celli said:

Is there any harm in removing that ? I assume it's okay to leave the text split, and not revert back to the original HTML.

Yep, that's perfectly fine! I just had the revert there because most of the time you don't want to retain the extra markup so it's more responsive (like if the line wrapped differently on a different screen size).

 

1 hour ago, celli said:

The other thing I am wondering is with split text, if I reduce the width of the browser I get words that break in the middle of a word, Is there a way to avoid that ?

Do you mean after it's split? I'm guessing that's after you removed the .revert() and resized the page. If you want to retain the transition but also have it be responsive you should re-split it on the ScrollTrigger's refresh.

Share this post


Link to post
Share on other sites

Hi Zach, Yes, after the split, is when I mean the words break. If I want to keep it responsive and retain the transition, like you mention, I can add the re-splt to the scrollTrigger's refresh, but where exactly do I add the scrollTrigger's refresh ? I tried with the refresh method, but I probably am not including it in the right place in the code in my codePen

 

ScrollTrigger.addEventListener("refresh", function() {
   splitTextTl.revert();
    childSplit.revert();
});

 

Share this post


Link to post
Share on other sites

Thanks Zach, I will study this and see how it's done, thanks it is great.

Share this post


Link to post
Share on other sites

Hi Zach,

 

I am still having a little trouble understanding how to use the eventListener "refresh" with the splitText revert() to format my text characters so the text is not all split in my HTML after the splitText and scrollTrigger end. I have a new codePen that I've been working on with a basic splitText tied to scrollTrigger, and my revert instance is all the way at the bottom

 

ScrollTrigger.addEventListener("refresh", function() {
    SplitBurrowing.revert();
});

 

new CodePen 

See the Pen mdVMOjr by celli (@celli) on CodePen

 

I tried wrapping my code in a function and calling it the way you did, but that doesn't seem to revert the text

 

 

Share this post


Link to post
Share on other sites

Hey celli. After you revert the splits you need to re-split and recreate the split animation(s). That's why I put all of the animations in a function - that way I can just create them or recreate them as needed without issue. Does that make sense?

Share this post


Link to post
Share on other sites
4 minutes ago, ZachSaucier said:

After you revert the splits you need to re-split and recreate the split animation(s). That's why I put all of the animations in a function - that way I can just create them or recreate them as needed without issue. Does that make sense?

I think I understand, but does that convert the HTML characters back to the original format ? I checked the previous pen and it didn't look like that was happening when I inspect the HTML, and when I tried it here I couldn't get it to work.. This pen doesn't use the child and parent splitTexts, only one, without the masking technique.

 

On a standard splitText, I use revert like this...

var tlSplitGreat = gsap.timeline({onComplete: () => {SplitGreat.revert()}}), 

... and it changes the characters in my HTML back to one piece after the splitText is finished, but while using scrollTrigger I can't seem to get it working. This new pen is not using the masked letters like the previous one, it is more basic, so I thought I'd be able to just get the splitText to revert() onComplete ... is that possible  ?

Share this post


Link to post
Share on other sites
2 minutes ago, celli said:

I thought I'd be able to just get the splitText to revert() onComplete ... is that possible  ?

Sure, it's definitely possible. You just have to do it for both of your splits in their respective animations. I'd probably include it on the actual tween instead of the timeline (to keep related things as together as possible) but using the timeline's onComplete would also work. Updating your demo to do that seems to work to me. I'd fork it but it's private.

Share this post


Link to post
Share on other sites

It shouldn't be private, here is another link: 

See the Pen mdVMOjr by celli (@celli) on CodePen

 

ahh, I must have added it within my scrollTrigger previously, I added it to the TL now (at the bottom of the JS) and it does look to be working :) But it doesn't animate back in reverse now when  scroll back up...

Share this post


Link to post
Share on other sites
1 hour ago, celli said:

But it doesn't animate back in reverse now when  scroll back up...

Right, because you reverted it...

Share this post


Link to post
Share on other sites

Can I do both? Can I revert the text so that it is not split into individual letters on scrollEnd, while also keeping it ready to split again in reverse when I scroll back up?

 

The problem that I seem to keep having is when the letters are split into individual letters in the DOM, the tendency is that words break onto separate lines, in the middle of a word, leaving lone letters or parts of words on individual lines, depending on the viewport size.

Share this post


Link to post
Share on other sites
1 hour ago, celli said:

Can I do both? Can I revert the text so that it is not split into individual letters on scrollEnd, while also keeping it ready to split again in reverse when I scroll back up?

Nope. How would that work? Your splits that you are trying to animate wouldn't exist after the .revert().

 

1 hour ago, celli said:

The problem that I seem to keep having is when the letters are split into individual letters in the DOM, the tendency is that words break onto separate lines, in the middle of a word, leaving lone letters or parts of words on individual lines, depending on the viewport size.

Yep, this is why you should revert on resize or refreshInit. 

Share this post


Link to post
Share on other sites

okay, that makes sense. I'll try and figure out where to revert on resize.

Share this post


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.

×