How to create a quotes rotator using Timeline Stagger and SpiltText

[spartan89 3 Likes (Newbie)]

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!

See the Pen VMvaMB by ershad989 (@ershad989) on CodePen

[GreenSock 8,117 Likes (Superhero)]

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

[spartan89 3 Likes (Newbie)]

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 September 18, 2017 by spartan89
add some explanations

[PointC 8,599 Likes (Superhero)]

Hi @spartan89

 

I think this should work for you.

 

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

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.

[Carl 9,066 Likes (Superhero)]

Beautiful solution Craig. Thanks for doing all that!

[spartan89 3 Likes (Newbie)]

13 hours ago, PointC said:

Hi @spartan89

 

I think this should work for you.

 

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

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

[Carl 9,066 Likes (Superhero)]

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"));
}

 

See the Pen LzGKQg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

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.

 

 

 

 

 

 

[Carl 9,066 Likes (Superhero)]

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.

 

See the Pen yzOLKb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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.

[Carl 9,066 Likes (Superhero)]

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

 

See the Pen JrXdVy?editors=0011 by GreenSock (@GreenSock) on CodePen

 

[PointC 8,599 Likes (Superhero)]

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

 

Nice solutions. 

 

[spartan89 3 Likes (Newbie)]

Thank you @Carl