CSS Trigonometry is surprisingly useful

Key Takeaways

hello my front end friends there's probably two camps of people who have clicked on this video the first being people who have a comp side agree or at least who paid enough attention in math class to know its sign costs in 10r and were 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 a long 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 sign or costs 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 rcss to make our lives a little bit easier so this is what I 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 cost 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 us 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 I'm 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 um 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 VAR size and instead of giving it a height with the same thing though we could do that I'm 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 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 then we go we get this that's inside of there now if I was just doing the width or even with the height um 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 uh 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 uh and now it's dead in the middle you may be 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 end 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 uh translate and for now let's just do 20 pixels 20 pixels and you can see it goes there and actually I want Ah 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 a magic number 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 a zero but then I need it down more so maybe that becomes a hundred 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 um and then here instead of this one and again we can break this up onto multiple lines as well uh just so it's again a little bit cleaner what we're doing uh 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 we're going to place this one with a COS 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 cost for the x-axis and sine for the y-axis uh again I didn't go to comp site I don't remember trade very well from way back when when I was in high school but basically that's just how for circular stuff you'd be looking at classes for your X sinus for your y and what we're going to do now is take this we're going to put a calc around this so again this looks like it's going to be a lot more work than um 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 what's actually going on but you can see that position itself out over here which is awesome uh 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 um 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 VAR 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 you can see that's gone back into its place so we can update these I'm just going to do command D or Ctrl D and do it really fast here so we can have our offset on all of them now the advantage as 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 got 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 uh 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 uh 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 preprocessor and so what we're going to do is we're actually going to take all of this oh 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 SASS and sine and costs are actually part of SAS um for a long time now but now it is part of CSS but we can say 4i 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 uh we can also do an a two instead of a through but in this case this will work nicely now we're gonna do is circle and do our nth of type but in this uh we have to use something called interpolation this looks a little bit weird um but we're going to see that it works but this is my variable here and it 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 SAS if you don't know about it 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 1 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 uh which should all be inside of here plus one and that would also work um this actually would give us the exact output I have here where the first one is starting at zero so we're saying this the first time this Loop runs this is zero plus one so we're doing our nth 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 8 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 Three Sixty divided by eight will give us 90 degrees and so on and we can even make this a little bit better as well um with SAS we can have variables just like we can with custom properties so we could have a total here um and it could you know total circles or total whatever and I could use that number here so we could say uh total uh we're gonna can I do a total minus one actually um 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 uh 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 uh 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 uh 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 advantage 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 8 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 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 deflect a display of flex with a gap of one um 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 an 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 uh you know 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 SAS uh where are we doing at four 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 of type and interpolation which means we do the pound symbol squirrely braces and then uh 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 sine 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 uh we'll say I we'll 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 little delayed sort of you know one of those sign costsy things whatever you call them uh 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 could 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 sine if I was doing this on the x-axis because I think we used um but it doesn't actually look bad there either so look at that it looks good for both of them um 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 circley thing with the animations and it can start off 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 corn on the internet just a little bit more awesome