I'm practicing working with the Timeline, and I've come across a bit of a challenge.
This codepen has a button that moves 3 circles towards a div block, and then towards an SVG of an emoji. The emoji then displays a word in a thought bubble.
All 3 circles move as they should, and eventually move onto the emoji as they should. The problems I'm facing are:
A circle should make a complete trip (start -> div block -> emoji) before the next one starts its animation. Currently what happens is each of the circles go from start -> div block, and only once all 3 are there do they start moving -> emoji.
I'm pretty sure all of this has to do with the way my timeline is being managed but I'm not quite sure where I'm going wrong. I suspect it's the timeline because there's some kind of incremental delay once the circles have to move towards the emoji, and that delay grows even more once the words start appearing in the bubble.
I'm guessing I should use stagger() but I don't know how I'd use it here.