seamlessly stack staggers?

[TheBusyBee]

Hello, I'm wondering how I would set up a the timeline so that the staggering from the intro of the circles would seamlessly move into the staggering of idling circles? As you can tell, there is a pause between when the circles stagger into the viewport, and when the circles start doing their idle animation. I would like to get rid of that pause.

 

Thanks!

See the Pen xxyGPQp by CheesymonTony (@CheesymonTony) on CodePen

[geedix]

You can move that 2nd tween to happen a second earlier with a position parameter, like this:

See the Pen zYmGRNV by geedix (@geedix) on CodePen

 

 

[TheBusyBee]

Thanks for the response @geedix! unfortunately it's not exactly what I'm going for. I came upon this myself, but what I found was the timeline seems to just store it's current scale at the time when the next tween would fire, and then move between that scale and the provided scale. So if I were to say, desire the idle animation to move between 1 and .2, setting it to 1 second inward, would grab a very similar scale and move between those two, like this: 

See the Pen qBJdxYZ by CheesymonTony (@CheesymonTony) on CodePen

[Rodrigo]

hi @TheBusyBee and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

I'm not completely sure I grasp what you're looking for. Maybe something like this:

See the Pen yLRNjeb by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps. If you keep having issues, please be as specific as possible about what you're trying to achieve.

Happy Tweening!

[TheBusyBee]

@Rodrigo

 

Thanks, I absolutely love your product! And my apologies for not being more clear. I was actually able to achieve my desired effect, but I had to build my own staggers. I will get to that in a moment.

Notice how in the first example I provided, there were 2 tweens happening. The first one staggered the individual red circles into the scene. The second one created what I would call an 'idle' animation that would occur as the mouse continues to hover over the object. In the first example though, the 'idle' animation for each individual circle doesn't start until all 3 circles reach the desired '1' scale. So this left a pause between when they reached this scale and when they started scaling back and forth between 1 and .7. 

 

Now in this one, there is no pause, because I basically create a tween for each individual circle, rather than applying 1 tween to the group and using the stagger property.

 

See the Pen YzJXvNG by CheesymonTony (@CheesymonTony) on CodePen

 

 I wonder if this might be possible though with the stagger properties that I was trying to use earlier?  Otherwise I'm going to have to build my own way of traversing through a grid and staggering the animations manually.

 

Thanks for your time! Hope this cleared it up a little bit.

[GreenSock]

I might be misunderstanding, but wouldn't it just be using the position parameter like @geedix said, and setting it to 1 which is exactly when the first circle finishes animating?: 

See the Pen rNqVPLP?editors=1010 by GreenSock (@GreenSock) on CodePen

[TheBusyBee]

@GreenSock That is actually very close! I hadn't tried just doing 1. And that could most likely work for some implementations. Sadly, I need a little bit more control over the staggering of each circle. So if I were to change the 'amount' property to a little bit higher(I set it to '1' in the example), you'll see that the same issues arise, where as soon as the next tween starts, it just grabs whatever value the 2nd and 3rd circle currently at, and tweens between those and the value I provide. Or, if you change the 'amount' to a much lower number, you'll start to see the pause again. So this implementation basically mimics the effect because the values given are suitable, whereas I need to be able to have the effect no matter the values given. 

 

See the Pen NWOGKgy by CheesymonTony (@CheesymonTony) on CodePen

[GreenSock]

This is just a logic thing - you're setting up your tweens in a way that's overlapping incorrectly, creating conflicts. You need to understand what you're doing there with the timing. For example, on your first stagger, you've got a duration of 1 so you know that the first element will be done at EXACTLY 1 second, thus you can start your next staggered animation at that time. But your "amount" of stagger in that first one is 1, meaning 1 second gets split among however many targets you have (3 in this case). Thus there's 0.333 seconds between each tween's start time. But in your second staggered animation, you've got an amount of 0.5, thus the amount of time between each start is 0.166. So the very first one works fine because there are no overlaps, but the 2nd and 3rd ones have overlaps. In other words, the "down" scale kicks in BEFORE the "up" one is done. 

 

GSAP is doing exactly what you're asking it to do. This is all just logic in the timing. Set your "amount" to the same in both staggers if you want to avoid those overlaps. Or adjust the position parameter so that it's further out to avoid overlaps. 

 

See what I mean? 

[TheBusyBee]

@GreenSock Omg.. you're so stinkin right! Ack! I can't believe I didn't see it before. Thank you so much for clearing that up for me. I just couldn't wrap my head around it for some reason, and now it seems so simple. I guess that's how it goes though. 🤷‍♂️ Thanks again, I really appreciate all of your help! Here's the updated pen that works as I was hoping it would, with the timing setup as you all explained.

 

See the Pen NWOGKgy by CheesymonTony (@CheesymonTony) on CodePen

 

[GreenSock]

Great! Glad it's all cleared up now. Thanks for posting your solution.