Jump to content
Search Community

Stagger and Overlapping repeat

iDVB test
Moderator Tag

Recommended Posts

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?

 

 

Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 3
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...