Stagger and Overlapping repeat

[iDVB 10 Likes (Newbie)]

Is there a nice compact way to have an animation stagger and overlapping repeat?

I'm trying do to this with a negative repeat value which does not seem to work.

https://codesandbox.io/s/admiring-bhabha-zdx7y?file=/src/App.js

 

The ideal solution would have the initial word up there to start (no animation) then this animation would run continuously, flipping through the words and overlapping at the repeat so you can't really tell where the start and end are.

 

Using a negative repeatDelay does not seem to work.

 

Ideas?

 

 

[Carl 11,103 Likes (Superhero)]

The trick is to have each element in your stagger repeat infinitely and have the repeatDelay long enough so that it doesn't repeat until all the other items have animated.

 

I teach how to do this in GSAP 3 Beyond the Basics (link in signature), but here is a reduced test case:

 

See the Pen ExVEOPa?editors=0010 by snorkltv (@snorkltv) on CodePen

 

If you want the initial word up there to start, you would just adjust the timeline's playhead position on load accordingly with play(1) or whatever.

[iDVB 10 Likes (Newbie)]

Great. Thanks! I'll give this a go.

[iDVB 10 Likes (Newbie)]

@Carl

Any particular reason the timeline repeats only 20 times?

Not sure how the tweens keep repeating then?

[Carl 11,103 Likes (Superhero)]

 

6 minutes ago, iDVB said:

Any particular reason the timeline repeats only 20 times?

 

nice catch. {repeat:20} should be removed. the animations are infinite because in the stagger object the repeat is set to -1. A timeline with children that repeat infinitely will never complete or repeat.

[Carl 11,103 Likes (Superhero)]

I decided to release the video and demos as a free tutorial. Check out the video if you need more help understanding how I configure the dynamic repeatDelay

 

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

[iDVB 10 Likes (Newbie)]

@Carl Thanks for the help with this.

Any idea how I can have it sit/pause/delay on the first word for a bit before a more steady rate at continuously rotating between them all over and over?

 

Even more ideal would be to find a way to animate in the first word WITH the other text "Wick, amount of words" before cycling through the words as it does now.

 

[ZachSaucier 7,129 Likes (Superhero)]

29 minutes ago, iDVB said:

Any idea how I can have it sit/pause/delay on the first word for a bit before a more steady rate at continuously rotating between them all over and over?

It's probably best to loop through your elements and created chained tweens (in a timeline) for each one individually if you need different animations. 

 

Maybe this article on animating efficiently can help you with the looping: https://css-tricks.com/tips-for-writing-animation-code-efficiently/#tip-7-use-function-based-values-staggers-and-or-loops

[iDVB 10 Likes (Newbie)]

Its a dynamic number of words... so not sure how I can do that. I really just want the first word to be on the screen a bit longer than when things loop.

 

[ZachSaucier 7,129 Likes (Superhero)]

20 minutes ago, iDVB said:

Its a dynamic number of words... so not sure how I can do that.

You'd select however many words are there, loop through them, and create the animation  Then you have access to the index and can do a completely different animation (like animating in "the first word WITH the other text 'Wick, amount of words'") for the first one.

 

It's not trivial to change the amount that the first word is shown on the screen using Carl's approach because of the repeat: -1s on the tweens and because the same animation is applied to all elements.

 

Here's how I'd do it (using a loop, not a stagger):

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