 Hello, my friend and friends. There's probably two camps of people who have clicked on this video, the first being people who have a comp side degree or at least who paid enough attention in math class to know its sine, cos, and tan r, and who are pretty jazzed that they are now part of CSS. And then the other camp are people who are more like me who see them used on equations from time to time and not along in appreciation while having no real idea of what's actually going on. I actually made something a little while back that used, I need to make like this orbiting thing that was going around in a circle. And I was just magic numbering everything. And a lot of people told me in the comments that I should have been using sine or cos or stuff like that, it would have made my life a lot easier. And now they're part of CSS, I thought it'd be a fun exploration to see how they'd actually help out. And, you know, see some of the use cases we could actually use these for in our CSS to make our lives a little bit easier. So this is what I'd initially started with where I magic numbered everything to get them all these things to go around this like that. And it was a lot harder than I thought it would be. And it was really just me magic numbering things trying to get it to look like it would be a circle. And now knowing how it would work with sine and cos but also being able to do it directly in CSS makes this so much easier. And even if you're someone like me who doesn't really know what they're for, we'll try and keep things simple. And at the end, we'll look at another use case that we could potentially use them for as well. That was kind of fun that I found. So here, we're just starting with this parent that's right here, which is going to be this center point. And we're going to create a whole bunch of circles that are going to go around the outside. And if we jump to my CSS, I haven't done very much. I'm just using this to place this in the middle. And I called it parent because this is a silly demo. It's not like a real world component in building. We're just going to use it to explore how that could work to maybe make something that was a bit more real world like we were just looking at. And so, yeah, this is just going to act as our center anchor point basically that everything will be circling around. And we have all of those circles. So let's get them visible on the screen. So we had our circle. And what I'm going to do is create a size variable here. And for this, let's start with 25 pixels and we'll see we can change this number after now for the moment, I'm going to do a width on here and use that so bar size. And instead of giving it a height with the same thing that we could do that, I'm a fan of using an aspect ratio and just doing one here. So if ever I do need a different shape, it's just a bit easier to do. And what that means is if we give this a background color of say orange, red, we can get a whole bunch of divs showing up that's mucking everything up that's in there. I did put on the parent here a position of relative. And because that position relative is there on these circles, we can come in and actually give these a position of absolute, which will fix the parent absolute like that. And there we go, we get this that's inside of there. Now, if I was just doing the width or even with the height, having the size as a custom property might be a little bit of overkill, but we're going to see why this comes back in a little bit because we're going to use this custom property in a few different spots. Now, because I like them being circles, let's also give this a border radius of 50%. Just so they are circles. And right now, they're all overlapping each other. And we don't want them to actually be overlapping each other, we need to spread them out. And this is where the sign and costs come in to help us position them where we want them to be without having to magic number things. But now the first thing we want to do is to be able to center them properly before we bring those in, they need to be centered like directly in the middle of this and not offset to the side like they are right now. So this is where the size is going to come in. There are other ways that we could use this, but I'm going to do it this way. And you could sort of flip things on the head a little bit. But with my position absolute, we're going to do a top of, we'll use a calc here, var, and we'll do size divided by two. And for my left, we're going to do the same thing, calc, var, I guess we could have just duplicated it, but whatever, we'll type it all out. And now it's dead in the middle. Maybe saying Kevin couldn't use transforms to do this. And you could definitely use the transform, but I'm going to be using my transforms to position them all around. You could flip that around. You could use the positioning with the signing costs to get things where you want with the transform to center it or vice versa. Either one would definitely work. Now, we're going to build this up a little bit. And you can see, or you might have noticed, this is actually an SCSS file. So it's a SAS file. And we're going to eventually get to like, a bit more of a complex situation that makes our lives a lot easier for if we need to make adaptations, but we're really going to step our way through it and add the complexity as we go through this. So the first thing we're going to do is let's just select the first one. So we have our circle. But instead of worrying about all of the circles, we're just going to choose our nth of type and we'll do one. And that would only select the first one. And now let's just give this a transform. And we'll do a transform of translate. And for now, let's just do 20 pixels, 20 pixels. And you can see it goes there. And actually one, that's fine. We'll leave that one there. And maybe we'll do 75 just to move it off a little bit extra. And we're moving it down to here. And then what I did last time, as I mentioned, I magic numbered things, which basically means then I would go to my two, and then I would try and figure out, you know, maybe that would be a 50 75. Nope, it's a 20 or zero. But then I need it down more. So maybe that becomes 100. We don't want to do that. Right. And then we have to try and figure out what it would be for a perfect circle. It becomes very hard to do. So what we can do instead of these is let's delete that again, focus just on this. And here on my translate, I'm going to put things on multiple lines, just to make it a little bit easier to see for the recording here. And then here, instead of this one, and again, we can break this up onto multiple lines as well. Just so it's again, a little bit cleaner, what we're doing, and a bit easier to read, because it will get a little bit long as we go through here. But if I save that, it's still working just exactly like we had before. And we're going to place this one with a cost of zero degrees. And we're going to take the same thing and put it here, but make this one a sign. And you might be saying, why are we choosing those? And you'll notice right now it's gone back to where it was. We're going to use costs for the x axis and sign for the y axis. Again, I didn't go to comp side, I don't remember trig very well from way back when when I was in high school. But basically, that's just how you, for circular stuff, you'd be looking at costs for your x sign is for your y. And what we're going to do now is take this and we're going to put a calc around this. So again, this looks like it's going to be a lot more work than what you might traditionally do with magic numbers, especially when you're looking at this and it looks kind of complex, right? Looking at this, you're going, well, what's actually going on? But you can see that's positioned itself out over here, which is awesome. And so let's actually take this, we're going to copy that. And I'm going to paste it here and I'll explain what this 100 pixels is in a second. But we're going to do two. And then for now, let's just put in 30 here, we're going to go 30 degrees and hit save. Oh, look, it's coming around. And let's copy this one and make it again. And we'll make that one our third one and let's make this one 60 degrees on both of them. See what's happening here. And basically what we're doing is we're moving from zero, which was just straight across. And then we're going 30 degrees down and 30 degrees. And it's like how far along on your circle are we now how many degrees you want to rotate for each one depends on how many children are in there. In this case, we have eight children. So if you have eight children, we know we start with 360 degrees for a circle, we can just do divide by eight. And each one needs to be rotated by 45 degrees. So I can come here. And if I want to make sure that all of those ones are working properly, I need to do that at 45. Then we're adding from 45 would become 90 because 45 plus 45. And it's going to position everything properly. Now having to copy this out and then change the degrees like this every single time is a little bit annoying. So there is ways we can simplify this a little bit. And what I'm going to call this number here, we're going to sort of switch out all of these. And the number here, what we're going to do is we're going to call this one bar offset. And the reason I'm saying offset is this is how far away we are from the center point, we're going, we want to be 100 pixels or 20 pixels or 50 pixels or whatever it is. So let's come all the way back up to our circle here or this could even go on the parent itself. But I'm going to write offset here and put in the 100 pixels and hit save. And you can see that's gone back into its place. So we can update these. I'm just going to do command D or control D and do it really fast here. So we can have our offset on all of them. Now the advantage is with that because it's a custom property, I can update it in one place, right? And it updates in all the places at the same time. So right away, that's kind of cool. And then the next thing we can do actually here because we've done that is on this, we could do var degrees here. And then we could also take that and plug it in right there. And you can see that one's gone because we don't have any degrees on it. But now what we could actually do is take this transform and put it on all of the children instead of having it set to being on each individual one. And the reason I'm doing that is because I've made the degrees custom properties, all I have to do is come here and I can write degrees and put zero. And then I can take this degrees here, delete all of this and say degrees is 45. And you can see that one's gone back into place. And actually for this to work, I'm not sure if you need it for zero, but always make sure you are including it as a unit for each one of them. And then let's do this one last one for now degrees becomes 90 degrees. And it's still in the same place. But for fun, let's just do 120 just so we can see that it does move along on the circle. And so what I'm going to do is just really quickly update this to get them all in place and then show you a nice little trick we can do to speed things up just after that. And just like that, we have everything in place. And you can see my dots are all perfect. And it looks really good, I think, at least in my opinion, that we can get them in the perfect circle like that. And it makes it relatively easy to do though, I was sort of taking my time and trying to figure out these numbers and I even made a mistake along the way with one of them and that offset all of them and then I had to go through my degrees again to get them all in place. So one way we can actually simplify if you're doing stuff like this is to use something like SAS, which is a pre processor. And so what we're going to do is we're actually going to take all of this off, do that and hit save and they're all gone. And then instead of doing it individually for each one, we can use loops within SAS and signing costs were actually part of SAS for a long time now. But now it is part of CSS. But we can say for I and if you're used to loops from JavaScript and stuff, this will look very familiar. If you're not used to them, this might look a little bit strange, but we're going to say from one through eight. And so it's going to count from one through the number eight, including the number eight, we can also do an a two instead of a through. But in this case, this will work nicely. Now we're going to do is circle and do our nth of type. But in this, we have to use something called interpolation. This looks a little bit weird. But we're going to see that it works. But this is my variable here. And just because it's not being used as a value, I have to wrap it like this. So this actually compiles to regular CSS. Everything I'm doing now is going to turn into exactly what we see here. So if you're curious about what the output of this is and a preprocessor like sass, if you don't know about it, the browser can't read this code. It's something that it gets turned into regular CSS after the fact. But we'll look at a nice reason why this can come in handy. And then basically what we can do here is for each one of these, we can say that our degrees and I guess we could call that angle, but it doesn't really matter right now. So what we're going to do is we can take this this here and we actually have to use interpolation for it here, because we're using it as a custom property, just in case you're used to wondering why I'm using that here. But we want to take this number. So remember, that's going to the first time this loop runs, it's going to use the number one for i. So to be end of child one, and then this number will be one, then the second time it runs, it'll be the number two, then the third time it'll be the number three and four and five and six and so on. And then what we're going to do is we're going to multiply that number by 360. But we don't want to actually do it by 360 degrees because we have eight different pieces, so we can divide that by eight. And so this would be the same the first time around, that would be saying so one times 360 divided by eight. So the first one will be at 45 degrees, and it will work and position everything. We could actually do this zero through seven, I think, and it would give us the same result it does not. Oh, because then we're not choosing, if we did that we'd have to do a plus one here, which would all be inside of here, plus one, and that would also work. This actually would give us the exact output I have here, where the first one is starting at zero. So we're saying the first time this loop runs, this is zero plus one, so we're doing our end of child one, zero times this number gives us zero. The second time it's running through, it's doing this is the number one plus one, then this is going to be the number one times 360 divided by eight, which is 45, then it's going to do it with the number two. So this becomes the third child, it's a two here, two times 360 divided by eight will give us 90 degrees and so on. And we can even make this a little bit better as well. With SAS, we can have variables just like we can with custom properties. So we could have a total here, and it could, you know, total circles or total, whatever, and I could use that number here. So we could say total, can I do a total minus one actually, and wrap that. And that's still working and the advantage with that is then this total could also come here, except we'd have to use interpolation once again for that, because this is a custom property to make sure that it's actually working. And the nice thing with this is, say all of a sudden you wanted 12 of them, well, I could set it up for 12. And then I could come here and we could just add a few more. So circle times four, of course, you have to spell things properly. And then we get our 12 circles there. Or if ever you wanted less circles, you could have less circles, it's breaking things a little bit. But that's sort of the nice thing of using SAS that once you've figured everything out, if you have these types of things that you're just repeating yourself and doing a little bit of a math operation yourself, we could just build that into something like this. And the big advantage here is like all of this is possible within a calc. This is not possible right now looping through different selectors like that. And again, what I'm putting here is exactly, this is the output that we're getting. So whether you want to use something like SAS, or if you just prefer writing vanilla CSS, that's completely fine. So we'll bump this back up to eight or 12, I should say, just so we have those there. You can see it makes that nice circle. And the other thing I wanted to take a look at, I'm going to update this really fast. And I'll see you in just a second. All right, so here we are. Now you can see I have a straight line instead of trying to get a circle. Most things are still the same. But on the parent, I'm using a display of flex with a gap of one, just to set those up. And here I've removed most of what we've done, we just have our circles basically and nothing else. And so what we can do here is now, I'm going to add this little keyframe animation. And it's just a transform on the Y axis. So up and down, and we can add that here animation of rise, we'll say five seconds and ease in out just so we have something that's running, and they'll start going up and down, I put rise and they're moving down. I guess we could do a negative there. We also want this to always be running. So I'm going to do an alternate and infinite right there. So it goes up and then down and then back up again. So it's just always running. And they're going like this. And what we can do now with this is a little bit like before where we had our loop from sass where we do an at for I and this one's gonna be a little bit simpler actually than the last one from one through we have 12 of them this time. So we can say going through all 12. And we'll do the same thing that we had before. So our circle and type and interpolation, which means we do the pound symbol, squarely braces, and then we can do that. And we're going to loop through each one of them. And what we're going to do is just do an animation delay animation delay on here. And this is where the fun part is of what this animation delay should be. So for this, I am going to use a calc, because we want to use this number to be able to like multiply and play around with it a little bit. And so we can say calc. And I'm going to do a sign of 50. And actually, I said before that you need the degrees in there. I'm not sure if you need the degrees, but we're going to say 50 degrees. And we're going to say times, we'll say I will take this number and make that a seconds s. And just by putting the s there, it's saying that's how many seconds it is. And now you get a nice little delayed sort of, you know, one of those sign, cosy things, whatever you call them, going for your animation, and you can get something that looks a little bit like that. Instead, just because of the way the offsets in the delay are, now you can do this with a regular delay as well and get a similar type of effect going on. So it's not like you need to be using sign. And again, we're using on the y-axis. So I use sign. If I was doing this on the x-axis, I think if we used, but it doesn't actually look bad there either. So look at that. It looks good for both of them. And yeah, a fun little way that you can sort of muck around and use these within animations as animation delays or other things as well. So it's not limited to just doing circles and other stuff. And I'm sure there's lots of really smart people, including perhaps you, who have really good use cases for them. So if you have any of these, please share them down below to help expand my knowledge on this, because it's still super limited on these topics. Now, if you enjoyed this video, but you'd like to see how I did more of that circle-y thing with the animations, then I can stop the animation. And it was actually a lot more complex than I thought because I had to do like reverse animations. Anyway, if you'd be interested in knowing more about that one, it is right here for your viewing pleasure. And with that, I would really like to thank my enablers of awesome on Patreon, Michael, Simon, Tim, and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.