Demystifying animations 🎩✨ Take a deep breath countdown

Hi, I wanted to go through some of the code for the countdown animation that was released for the Chrome extension.

Um, because I feel like, uh, uh, sometimes people like don't know where to start with some animations. Um, and this one is like pretty, it's more it's on the simpler side to like, uh, explain and talk to you.

Um, so, so this is the animation I'm talking about, you know, that one where there's like a breath. Okay. So, um, here I changed the Xanax or this is like, uh, where I prototyped the, the animation before adding it to the Chrome extension rebuilt.

Um, and here I, I did the accent circles. Like I changed the accent circles, the index to be in front so that you can kind of see like, um, like, uh, what's going on more easily.

Okay. So, so now it's like easier to tell what happened during that animation. Okay. And I'm going to go through the code for it.

And most of it is CSS animations, um, and for CSS or like animations in general, uh, we want to stick to only, um, changing things like transformer or opacity for performance reasons.

Um, and there's like, there's articles about that too. Um, so sticking to transform and opacity, uh, there's so many things we can do still.

Uh, so what we did, so this one is for that, that left circle in particular. Um, and like I played with the numbers quite a bit to see like how far I want it to go and the pace at which, um, I want it to like, get back behind the, the bigger circle.

And then, so like, these were just like twine with numbers, the side, the right side circle is just the opposite direction.

Right. So then these were just, this was just flipped to negative. And then for the top one, um, <inaudible>, Uh, Google has a like nice tool for finding the high hypotony news of right triangles.

Um, so here, so here, uh, 30 30 is like how far from the middle, like 30 to the left and 30 down.

So then if we do like 30, 30, then we get, um, something like 42. So if we're in the center and moving 30 down in 30, over the news is how far it is away from the center.

And so then we want to go 42 up. So that's where we start. So 42 up is where we start.

And then if we calculate the hypothesis of the difference between like these, then we get where we want to go.

So that would be the difference between these two. So that's like 50 and 20. And so if it's 50 and 20, then we get something like 54.

And if we add 50, well, a little less 53, uh, this what's a ballpark, uh, and add it to 42, then we will get where, uh, we want that top circle to reach to before coming back.

Um, so yeah, I'll link to this in the CTA, if you want to take a little play around, um, and in the future, we might be adding more, more phrases along with animation.

So, uh, let me know if you make anything cool and, uh, uh, DME. Okay, bye. Thank you.