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. https://codepen.io/CheesymonTony/pen/NWOGKgy

@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. https://codepen.io/CheesymonTony/pen/NWOGKgy

@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. https://codepen.io/CheesymonTony/pen/YzJXvNG 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.

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: https://codepen.io/CheesymonTony/pen/qBJdxYZ

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!