spartan89

How to create a quotes rotator using Timeline Stagger and SpiltText

Recommended Posts

Hi everyone!

I would like to create a quotes rotator with SplitText and Timeline Stagger which can be animated in lines or words or chars!

I have already tried to create one and there is the Pen that I made below here but it is not really what I wanted to achieve!!

I would very appreciate any kind of help. Thank you!

Share this post


Link to post
Share on other sites

Can you be a little more specific with your question? What exactly isn't the way you want it in that codepen? 

  • Like 1

Share this post


Link to post
Share on other sites
On 9/17/2017 at 9:49 AM, GreenSock said:

Can you be a little more specific with your question? What exactly isn't the way you want it in that codepen? 


If you look at the Pen you can see that it is not organized, I want that when a quote starts going out the other one start coming in simultaneously for all the quotes, but this only happens for the first two quotes.

I also want this as an option: the quote goes out completely and then the another one starts coming in.

And I want it to have a loop! when the last one appears it goes back to the first one. right now the quotes stop showing up when they are all shown just once, and there is nothing to see afterward.

And I want this whole function to be possible for splitting and running animation on lines, words and chars like options and the user can select one!

I hope it's clear enough. I have spend hours on this but couldn't get it to work!

Thank you

Edited by spartan89
add some explanations

Share this post


Link to post
Share on other sites

Hi @spartan89 :)

 

I think this should work for you.

 

If you'd like the quote to stay up longer, you can change the pause variable. If you don't want the next quote to overlap at all, you can set the overlap to 0.

 

Hopefully that helps. Happy tweening.

:)

  • Like 6

Share this post


Link to post
Share on other sites

Beautiful solution Craig. Thanks for doing all that!

  • Like 2

Share this post


Link to post
Share on other sites
13 hours ago, PointC said:

Hi @spartan89 :)

 

I think this should work for you.

 

If you'd like the quote to stay up longer, you can change the pause variable. If you don't want the next quote to overlap at all, you can set the overlap to 0.

 

Hopefully that helps. Happy tweening.

:)


Thank you so much PointC it is exactly what I want and it works so smooth!

Just one small thing here: when the last quote goes out the first one starts again after some time and it's not like the other quotes in the row like 3 after 2!!

If you could make this more fluent it would be awesome! Thanks again

Share this post


Link to post
Share on other sites

Timelines are linear. You can't have something playing in the beginning while something at the end is still happening.

In other words you can't have the end overlap with the beginning.

 

So the solution in simple terms is that you need to have another animation at the end of your timeline that animates the first quote in as the last quote goes out. Once the "fake" first quote animates in you can jump back to place at the beginning of the timeline where the first "real" version of quote 1 already is done animating in and start replaying the the master timeline from there to get a seamless loop.

 

In code terms it is actually a bit tricky. The way PointC set things up with the loop works great until you want to add another animation of quote 1 at the end.

There isn't a clean way to re-split the text and things get a little dicey when you want to to multiple staggerFrom()s on the same elements in the same timeline due to how immediateRender works.

 

So instead of using PointC's loop to generate timelines that all get put in a master timeline, I put those timelines in an array.

I then build a timeline that sequences a bunch tweenFromTo()s on each.

 

for (var k = 0; k < quotes.length; k++) {
  var tl = new TimelineMax({paused:true});  
  var mySplitText = new SplitText(quotes[k], {type:"chars, words, lines"});
  tl.staggerFrom(mySplitText.words, dur, {x: -50, opacity: 0}, stagger);
  tl.add("textIsIn"); //mark the place where text has fully animated in
  tl.staggerTo(mySplitText.words, dur, {x: -50, opacity: 0}, stagger, "+=" + pause);
  timelines.push(tl);
}
//build a timelin of all the child timelines tweening. This allows us to animate the first quote timelines[0] at the beginning and end without having to split the text twice or create new animations.
//this could all be done in a loop but its probably easier to read it like this
master.add(timelines[0].tweenFromTo(0, timelines[0].duration()))
master.add(timelines[1].tweenFromTo(0, timelines[1].duration()), "-=" + overlap)
master.add(timelines[2].tweenFromTo(0, timelines[2].duration()), "-=" + overlap)
master.add(timelines[0].tweenFromTo(0, "textIsIn"), "-=" + overlap)
function restart() {
  //tell the master to jump past the intro animation that happens in the first quote
  master.play(timelines[0].getLabelTime("textIsIn"));
}

 

 

 

Hopefully that gets the right end result.

 

As I think about it more, you may be able to build a timeline of nested timelines that all repeat using a repeatDelay that has them all overlap perfectly.

 

 

 

 

 

 

  • Like 4

Share this post


Link to post
Share on other sites

this is what it could look like if you wanted to give each nested timeline its own repeatDelay.

Its a little tricky figuring out for each timeline the amount of time between when it ends and when its next iteration can start since each timeline has unique durations.

 

 

Unless you really need the playback controls of a timeline: pause, reverse, resume, change timeScale, It would probably be a whole lot easier to just build individual timelines for each quote. In each timeline place a callback near the end that tells the next quote to play.

  • Like 2

Share this post


Link to post
Share on other sites

so the idea of having multiple loose timelines that trigger the next timeline looks like:

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Looks like you're having some fun with this one @Carl;)

 

Nice solutions. 

:)

 

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.