celli Posted June 19, 2020 Share Posted June 19, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 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 3 Link to comment Share on other sites More sharing options...
celli Posted June 19, 2020 Author Share Posted June 19, 2020 Ahh, great! I thought there would be a streamlined GSAP way. Thank you Zach! Link to comment Share on other sites More sharing options...
celli Posted June 19, 2020 Author Share Posted June 19, 2020 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 ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 19, 2020 Share Posted June 19, 2020 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. Link to comment Share on other sites More sharing options...
celli Posted June 20, 2020 Author Share Posted June 20, 2020 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(); }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 20, 2020 Share Posted June 20, 2020 You'll need to iterate through each instance. Here's how I'd do it: See the Pen bGEqbaQ?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
celli Posted June 20, 2020 Author Share Posted June 20, 2020 Thanks Zach, I will study this and see how it's done, thanks it is great. Link to comment Share on other sites More sharing options...
celli Posted June 30, 2020 Author Share Posted June 30, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 30, 2020 Share Posted June 30, 2020 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? Link to comment Share on other sites More sharing options...
celli Posted June 30, 2020 Author Share Posted June 30, 2020 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 ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 30, 2020 Share Posted June 30, 2020 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. Link to comment Share on other sites More sharing options...
celli Posted June 30, 2020 Author Share Posted June 30, 2020 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... Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 30, 2020 Share Posted June 30, 2020 1 hour ago, celli said: But it doesn't animate back in reverse now when scroll back up... Right, because you reverted it... Link to comment Share on other sites More sharing options...
celli Posted July 1, 2020 Author Share Posted July 1, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 1, 2020 Share Posted July 1, 2020 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. Link to comment Share on other sites More sharing options...
celli Posted July 1, 2020 Author Share Posted July 1, 2020 okay, that makes sense. I'll try and figure out where to revert on resize. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now