Jump to content
Search Community

SplitText beginner - needed help with an effect

harp30 test
Moderator Tag

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,

Just got GSAP CLUB MEMBERSHIP AND LOVE IT! SplitText is saving me soooo much time! 

I was trying to create an animation text effect like this site:
https://en.leviev-group.com/about/

I love their big text animation which comes after the loading overlay. I was trying to do it but my animation timing or so seems off. Can anyone guide me on how to create a similar effect? 

Are they using multiple splitText objects for each line of text? Or is it all one?
Very excited to learn!

And also how can I make sure any word doesn't break? And revert function doesn't work for me.

Thank you.

See the Pen oyRLOe?editors=1010 by harp30 (@harp30) on CodePen

Link to comment
Share on other sites

Hi @harp30 :)

 

Thanks for joining Club GreenSock.

 

I'm not sure how that website is splitting the text, but you can easily accomplish the same thing with SplitText. In answer to your questions:

 

1. You can make sure your words don't break incorrectly by splitting by words and/or lines in addition to characters.

2. Your revert wasn't working because your were trying to revert() introSplitText, but the variable name should be introSplitText_Heading.

 

If I'm looking at the correct animation on that website, it looks like you want all the lines of the text to animate at the same time, right? If that's the case, I think an easy way to make it happen would be to split the text into lines and characters. Then loop through the lines and create the stagger for all the character divs in each line. Maybe something like this.

 

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

 

The SplitText docs are quite extensive and loaded with more detailed information.

https://greensock.com/docs/Utilities/SplitText

 

Also check out the SplitText collection on CodePen

https://codepen.io/collection/KiEhr/

 

Hopefully that helps a bit.

 

Happy tweening and welcome to Club GreenSock.

:)


 

 

  • Like 3
Link to comment
Share on other sites

Okay great thank you very much.

Just to wrap my head around this:
type: "chars, lines", <-- places current div content into chars and lines?
      linesClass: "line line++" <-- adding a class to each line and adding a line with incremented values: .line1, .line2, and etc?
    }),
    revertSplit = function() {
      introSplitText_Heading.revert();
    };
  
  let lines = document.querySelectorAll(".line"); <-- get all the line classes we generated above?
  const tl = new TimelineMax({ onComplete: revertSplit });
  for (i = 1; i < lines.length + 1; i++) {
    tl.staggerFrom(
      ".line" + i + " div", <-- animate .line1, .line2, and etc. What does " div" represent? Shouldn't just the .line(1) be enough to target?

Thank you.

Link to comment
Share on other sites

type: "chars, lines", <-- places current div content into chars and lines?

Yes - chars and lines will wrap a line div around all the chars divs. You can add words too, but it wasn't necessary in this case. If you use all three, the chars will be wrapped in the words which are then all wrapped in a line div. And all three are wrapped in your original element (h1 in this case).

 

adding a class to each line and adding a line with incremented values: .line1, .line2, and etc?

Yes - line++ adds a number to the lines.

 

 <-- get all the line classes we generated above?

Yes - the querySelector is selecting the lines generated above so we can get a count for the loop because that will vary depending on screen size.

 

Shouldn't just the .line(1) be enough to target?

If you only target .line1 and .line2 etc.. then you will get a whole line animation. In this case it looked like you wanted the individual characters to animate on each line, but all lines needed to start at the same time. So we target all the child divs in each .line div to stagger. Each character is in its own div nested in the .line div.

 

A good way to see what's happening under the hood is to inspect an element after you split it into chars, words and lines. It's quite powerful as you can loop through any of those splits and do some really creative things.  

 

Just to be clear, normally you'll probably just animate the split.chars or split.words etc... but this was a case of needing all the lines to start animating at the same time so we make multiple stagger tweens out of the split. Does all that make sense?

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Hello,

Effect is looking quite beautiful all thanks to your guidance and support!

Have one small dilemma, I want each line to cover only one block not two, this is what I mean: As in the attachment, the first line(.line1) takes up two blocks but only want one block for each line. This is causing an odd animation. How to fix this?

Its weird because in codepen it works fine but in my project it does whats in the attachment below. Confused...

Codepen link and attachment is below this:
Codepen: 

See the Pen jKoVwL?editors=1100 by harp30 (@harp30) on CodePen

Screen Shot 2018-07-05 at 8.12.54 AM-min.png

Link to comment
Share on other sites

Solved it - partially. The same issue is present but I made the second(.line2) come in '-=1' before so by the time .line1 ends half way .line2 will come in. Still not really working due to .line1 holding two blocks rather than one..

But still want to know how to set up .line for each block.

Link to comment
Share on other sites

Sorry, I can't seem to replicate line one going onto 2 lines. Can you provide a demo that shows the split not working properly? The demo does not even need to contain any animation, we just need to see text that isn't being split to your expectation. thanks!

  • Like 2
Link to comment
Share on other sites

hmmm... that looked fine to me too. I couldn't get the demo to replicate the issue.

 

In your screen grab, the word professional is split in the middle, but shouldn't be. Maybe try adding words to your split. If you do that, you'll also have to make a slight adjustment to the animation too. Right now, we're grabbing all the nested divs (chars) in the .line div and animating them, but adding words to the split will add additional divs. You may need to add a class to the chars when you split and then just target that class in each .line div.

 

Hopefully that will correct the issue, but as @Carl mentioned, a demo showing the issue would be great.

  • Like 3
Link to comment
Share on other sites

yes, it all makes sense. In codepen its creating three .lines which is perfect - one .line for each block. But for me using the same sentence as codepen, its  creating only two .lines, which is the confusing part. So the three lines are being split as follows: two blocks into one .line and last block into second .line
But there needs to be three .lines not two because there are three blocks.


I created another codepen project and once again it works fine - its creating .line per one text block: so there are 3 blocks and 3 beautiful .line classes
I have also attached the images into the codepen of the issues on my end. As you can see in the images there are only two .lines but there should be three like in the case of codepen.
https://codepen.io/harp30/project/editor/AqbzjP

But once again when i copy and paste and use this code.. theres an issue. I placed the "same exact code" in the above codepen and its fine but doesn't work when I use the code off of codepen.

Thank you. Very tricky situation!

 

Link to comment
Share on other sites

I see you didn't add 'words' to your split in the CodePen project as I recommended. Have you tried adding words to the split in your local project?

 

Are you using the latest version of TweenMax and the SplitText plugin in your local project?

  • Like 1
Link to comment
Share on other sites

If I understand what you're saying, everything is working correctly in your demos on CodePen, right? But when you try the same thing in your local test environment, you're not getting the correct number of lines. Is that accurate?

 

I can't really dig through entire projects, but we can try a little test. Let's forget all about the animations for a minute and try some simple test splits. Please try the code from this pen in your local environment. Resize it a few times and click the button. Are you getting the correct number of lines each time?

 

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

 

  • Like 1
Link to comment
Share on other sites

Yes! Exactly it! The line count is off on my end but on codepen its dead accurate!

This is the issue 100%!

So I looked at the codepen version you just sent and I see 8 lines for large screen, 9, and goes higher as screen gets smaller - 34 lines for very small screens but on my end I see only 2 lines for large screens and highest it goes up via small screens is 7 lines - which is not matching the codepen version.

So Codepen 8 lines and my local environment 2 lines for large screens.  Can This be a flexbox issue or issue on my end of styling?

 

Edited by harp30
content change
Link to comment
Share on other sites

I have no idea if a flex container could mess up the line count, but it should have nothing to do with my demo as there is no flex styling on anything. I assume you copied and pasted my demo without adding any new styles, correct?

 

You're definitely loading the latest TweenMax (2.0.1), right? This is very odd, but since all the CodePen demos are working correctly, it seems like something local to your environment. What that could be, I'm not sure.

 

 

Link to comment
Share on other sites

We're eager to help, @harp30, but it's SUPER difficult without being able to see (and poke around with) a reduced test case. Can you provide something online, even if it's not codepen? 

 

The only thing I can guess is if your local environment is somehow having the page render at a bigger (or smaller) size initially, and then it resizes after the split. That'd be kinda weird, of course, and probably isn't the case. But I'm at a loss without being able to see something. 

  • Like 1
Link to comment
Share on other sites

9 minutes ago, harp30 said:

Like github? 

 

I suppose. Or even a live site somewhere. We just need to be able to see it. Can you reproduce the problem in a live site somewhere or is it truly only reproducible in your local environment? If it's only local, we probably won't be able to replicate it (just a guess). 

 

What version of SplitText are you using? (top of the file)

Link to comment
Share on other sites

Thanks for the demo. Although there is a ton of code and I was hoping for something much simpler where we could just split and revert the code with no animation, I was fortunate enough to see the page load slowly. It appears your entire page renders before loading animation and the fancy page build. 

 

Previously, @GreenSock mentioned:

 

Quote

The only thing I can guess is if your local environment is somehow having the page render at a bigger (or smaller) size initially, and then it resizes after the split. 

 

I recorded your page loading and noticed that on initial render (before styles are applied) that the text will break differently than it would with the styles applied. 

 

Although I can't verify this in your code, it appears from the video below that you are splitting your text BEFORE the styles are applied and thus they split differently than they would with the styles applied. This also explains the odd jump when you revert().

 

In the video below I have outlined the first line before styles are rendered. You can see that the animation of that line then breaks onto 2 lines because the container or the size of the text changes AFTER the styles are applied.

 

 

My suggestion is to make sure the page is fully rendered with all styles applied (also make sure custom fonts are applied) BEFORE splitting the text.

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Sorry, my mistake I misread the message about sending a smaller project. My apologizes.

Is this anything to do with webpack setup? Cause for webpack all styles and everything goes into a javascript file.. maybe thats the issue? So, in my main.js file I could load the scss file when page is ready and then run the rest of the js code?

Tried this:

window.onload = function(){

    

const scss = require('../scss/style.scss');

}

 

no change...

And also how did you manage to slow it down? This will really help with debugging for me if I can learn how to do so.

Link to comment
Share on other sites

I didn't slow anything down (only the video so you could see each state).

My connection was somehow naturally slow and I was able to see the site in its "pre-styled" state.

 

You can throttle your network connection (make page load slow) using Dev Tools: https://css-tricks.com/throttling-the-network/

 

I'm not really sure what webpack may or may not being doing but you need to test if delaying the splitting of the text fixes the issue.

Maybe use a setTimeout or TweenLite.delayedCall() to delay the function that splits your text and does the animation by 5 seconds or so.

If you confirm that waiting to split the text solves the issue, then use a more reliable method of waiting until the page is loaded and ready:

https://stackoverflow.com/questions/1033398/how-to-execute-a-function-when-page-has-fully-loaded

 

 

 

  • Like 2
Link to comment
Share on other sites

Done and done!!! Thank you so very much.

I did a setTimeout function and gave a time of 3 seconds and it works very well and as expected!

 So the styles do need to load in first - its a webpack issue its not injecting the css file into the index.html. So, I gotta find out how to place css file into the html file without having to load it via js as webpack does.

Maybe I can create a overlay bar and it takes 3 seconds to load and once loaded I can run the function..hmm lets see.

Thank you so very much! Spent a day on this and have troubled you enough. Thank you thank you thank you!!!!

 

  • Like 1
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.
×
×
  • Create New...