celli

Split Text and Browser Resize

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 ?

Share this post


Link to post
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

Share this post


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

Share this post


Link to post
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 ?

Share this post


Link to post
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:

 

http://codepen.io/PointC/pen/mWLwWv/

 

Does that help?

 

Happy tweening.

:)

  • Like 3

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Craig, sweeps in with the end of day death blow to Carl. Well played!

  • Like 2

Share this post


Link to post
Share on other sites

Ha! You whooped me earlier today so it's only fair.  :lol:

 

The throttling was the part I was concerned about too. That's always tricky on a resize event, but I think celli can make it happen. 

  • Like 1

Share this post


Link to post
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: http://codepen.io/celli/pen/WpJgrR

Share this post


Link to post
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

Share this post


Link to post
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 ?

Share this post


Link to post
Share on other sites

I don't know of an existing one, but I made one for you.  ;)

 

I'm just using a few boxes and generating a random duration and y position, but it should get you on the right track.

 

http://codepen.io/PointC/pen/peVmPG/

 

Does that help?

 

Happy tweening.

:)

  • Like 4

Share this post


Link to post
Share on other sites

wow. thank you PointC, I am studying this now, and see to apply it to my codePen.

Share this post


Link to post
Share on other sites

Hi PointC, I think I have it all correct in this codePen http://codepen.io/celli/pen/ryvXQQ 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.

Share this post


Link to post
Share on other sites

You're close. It should be:

var txtLines = document.querySelectorAll("#heroTxt div");

You also need to make the array from those divs after you split the text. 

 

Happy tweening.

:)

Share this post


Link to post
Share on other sites

Nice demo, Craig. 

  • Like 1

Share this post


Link to post
Share on other sites

Great Demo PointC, and thanks for all your help yesterday :)

  • Like 1

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.