Jump to content
Search Community

Split Text and Browser Resize

celli 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

I have a simple Split text that animates in each line of text, and it spans the entire browser window width. I have two questions:

 

I see that since it wraps each line in a <div> when I resize my browser, I loose the line breaks and it shows some lines that are truncated. Is there a way to avoid this, and have my split text adjust as I adjust my browser window size ? I wonder if we'd need some type of browser refresh script (every time you resize the browser window) in order to make that happen ?

 

Also I noticed that I have my text set to 'justify' but it doesn't look like splitText honors that, does anyone know of a work-around for that ? To get the text from edge-to-edge maybe if we can't honor 'justify' so that it looks justified ?

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

Link to comment
Share on other sites

Yeah, that's a little tricky.

 

Here I just split your text into words: http://codepen.io/GreenSock/pen/bqMwQa  Notice how resizing works real nice;)

 

I know you have an intro animation based on lines, but maybe you can wait for a resize, revert() the SplitText, and break it into words real quick.

As long as you don't need to animate as lines again, you can just leave it that way.

  • Like 3
Link to comment
Share on other sites

Thanks Carl,

 

I see your pen, but I don't see the text coming in line-by line anymore. Did you mean I can put that into a resize function and it would keep the text justified ? I tried that in my original pen, as well as restarting the timeline, but they don't seem to work. I might be missing something...

Link to comment
Share on other sites

hey PointC and Carl,

 

yes, I see what you mean now with .revert() ! I included that into my resize function and that will work, if someone resizes the browser window, it just stops.

 

One other thing is that I will have a few other timelines after this initial timeline and I set up a quick "red box" as an example that plays onComplete, and it looks like even though the first timeline animation isn't playing (because it's reverted) it still waits the amount of time it would have taken the staggering text to complete before triggering the onComplete event--Can I make that onComplete fire once we resize the window (only on the first time) ? Of Course if that fires every time the user resizes the window that wouldn't work well, But if it fires only on the first time, that would work. Or I can set up a master TimeLine (instead of the onComplete event), and jump to the label that would play my second timeline, but still I would need to control that to fire only on the first time... Do you think that is possible ?

Link to comment
Share on other sites

I assume you mean if someone resizes while all that text is animating?

 

If it were me, I'd put the onComplete on the SplitText timeline. That would trigger the next timeline (red box or a master) to play. Then in your resize event handler you can advance the progress of the splitText timeline to 1 which will trigger the onComplete immediately. This is also assuming you won't be splitting the text and animating again. You'd have to put some logic in to make sure it only happens once, but I think it should work.

 

Here's a quick fork of your pen:

 

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

 

Does that help?

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Sounds possible-ish. It will probably take some experimenting. You can always advance the timeline to the end using progress(1) and then remove the onComplete callback using timeline.eventCallBack("onComplete", null): https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/eventCallback/

 

I think the tricky part is how do you know when they are done resizing? 

You probably want to look into this example that illustrates how to wait for someone to stop scrolling:

 

http://codepen.io/GreenSock/pen/AwHmy?editors=1111

 

You can throttle the resize event in the same way.

 

Hopefully this gets you on the right path. 

  • Like 3
Link to comment
Share on other sites

You guys are the best. I would have been banging my head against my desk trying to figure out those other options. Thanks guys.

 

I was also trying to add a random value to the time it takes each line to animate in, so that each line animates in more randomly staggered, as opposed to from-top-to-bottom in order. I added a random function randomNumber(2, 0.2) to my time, but I don't think that will work. Is there a better way to randomize the time it takes each line to arrive at the end positions ?

 

New codePen based on PointC's advice: 

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

Link to comment
Share on other sites

A random duration won't work in a stagger like that. You can generate a random number for the duration, but it will apply to all the elements of the stagger array.

 

If you want to bring some more life to the lines, I see two options. The simplest would be to use cycle for some of the properties in the stagger. The other option would be skip the stagger and loop through the array and create a tween for each one. With a loop you could easily randomize the duration.

 

Hopefully that helps.

 

Happy tweening.

:) 

  • Like 2
Link to comment
Share on other sites

That's great PointC. Thanks!

 

I tried using cycle in my codePen and while it randomizes it, they still reach their end point at the same time, so some lines run quicker than others. That was a great idea though.

 

The looping through an array to randomize the duration sounds like that will do it. I just have t figure out how to make that happen--do you know of an existing codePen that I can study to see how that can be achieved ?

Link to comment
Share on other sites

Hi PointC, I think I have it all correct in this codePen 

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

I see my text split, but each lines doesn't animate in separately. I should be selecting the children of the #heroTxt Div I assume, to make each one animate in separately with random duration. Or maybe I'm not applying your demo correctly, or maybe my brain is scrambled at this stage.

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