CSS Trigonometry is surprisingly useful

[@DampeS8N]

For the animation delay one you didn't need sin/cos at all. You just needed a number that wasn't 0. Try it with 0.1 and you'll see. The sine wave that came from it wasn't due to using sin/cos, it was due to _how sin/cos is derived in the first place_ naturally arising from how you setup the animation. Change it to linear instead of ease-in-out and see the difference.

[@rodneymkay]

In general it's probably useful to understand that the sin/cos aren't context aware, so putting a constant (like 50deg in this case), just leads to another constant coming out the end. Aka. The animation delay in that case can only come from multiplying with i.

[@KevinPowell]

The `--offset` could have been `--radius`, as it's the radius of the circle that the dots are being placed on. Radius will be the offset from the center, so either way it works, but radius is a little more accurate :)

[@davidkerr8722]

I had a "grrr" moment then ;)

[@saeentist-hb]

🥳

[@StephanHoyer]

--angle instead of --degrees

[@futurefox128]

@@StephanHoyer He really only used degrees (deg) though. There are also radians (rad), gradians (grad) and even turns (turn) to describe angles in CSS.

[@lapridagaspar]

What about this? .circle{ --total-circles: 8; --degrees-step: calc(360 / var(--total-circles) ); --degrees: calc( var(--degrees-step) * var(--n) * 1deg ); } .circle:nth-of-type(1){ --n: 0;} .circle:nth-of-type(2){ --n: 1;} .circle:nth-of-type(3){ --n: 2;} [...] .circle:nth-of-type(8){ --n: 7;} It is still quite repetitive, but it takes away the possible human math error... and it's quite easy to update in case you wanna change the amount of circles

[@redkay7969]

css hack : put inline style variable on every circle like so (style="--i:1") and the second one (style="--i:2") and so on ... then go the css and use transform :translate( calc(var(--i) * put here your calculation ) then this will act like a loop its gonna loop through all the circles that has a var --i and treat them by the value you gave them for instance if you do want to rotate them all use this : .circles{ transform: rotate(calc((360deg / the number of circles) * var(--i))) translateY(the offset value)}; ps:circles should have position:absolute; and the container should be relative

[@mebamme]

For the second example, you don't actually need to use trig functions, since sin(50deg) is just some arbitrary constant number. The sine-waviness of it comes from the easing function. :)

[@stevezelaznik5872]

Sure, sin of 50 degrees is an arbitrary number, but it’s easier for a future developer to understand what’s going on. As an example, would you know what I mean by 0.707? I you’re a math geek, maybe. If I said sin(45 deg) that would immediately be clearer.

[@mebamme]

@@stevezelaznik5872 Sure! In a situation where trig functions are relevant, you'd definitely use them for clarity (like in the first example). However, in the second example, it's just an arbitrary number of seconds, not related to trigonometry at all. If you want a duration of 0.707 seconds, writing sin(45deg) would actually be less clear.

[@KyleLanmon]

sin and cos are functions that oscillate between -1 and 1. The difference is the starting point. sin(0) = 0, whereas cos(0) = 1

[@lawrencedoliveiro9104]

Actually, sin and cos can have any value. Here is an x such that sin(x) = 10: import cmath print(cmath.asin(10)) (1.5707963267948966+2.993222846126381j)

[@jacklenngren6590]

I am completely new to CSS and webdesign in general, so at 10:49 I was like, How do you select a bunch of lines to comment them all out at once in Visual Studio Code? I found an alternative solution while navigating my way to the answer: 1. Select the block of code you want to comment out. 2. Press Shift + Alt + A (Windows/Linux) or Shift + Option + A (macOS) to add a block comment with /* */ around the selected lines. 3. To uncomment the block, repeat the same keyboard shortcut. This is a superb lecture that even a newbie can follow without falling short! Great work Kevin!

[@romaingranai2335]

Another way, unrelated to cos/sin, to create waves, is to negative delay each item and play with the transition or animation easing, so the wave will have the same shape as the easing curve. It would be great to css to understand how many items are there so we wouldn't need to loop in scss, well it's easily done in js. Very cool videos btw!

[@sjorgen9122]

This was fascinating. I've actually been solving problems like this by writing svg paths in the html. You could draw a circle path, and then you can animate along it with offset-path. I'm glad I did the work of learning svg coordinates and drawing so that I can create my own shapes with just numbers when I need to, but this is a much more elegant solution to many sorts of problems and works on more than animations.

[@bjul]

Kevin, you are awesome! Your videos always put a smile on my face.

[@ozoindaprince]

exactly!!!!

[@shoelaced]

My favorite use case is responsive clip paths! You can keep the angles consistent as it resizes.

[@angrybadger6761]

Having my breakfast watching this and I'm enthralled. I'm not a mathematician or software guy but play with stuff like this for the fun of it building websites. Now off to look at css v scss. Who said retirement had to be boring. Thank you very much for the tutorial.

[@mathieuconstantin6811]

Just an awsome effect with a very clever way !

[@navidmafi]

oh that was so straightforward and the result was pretty extendable! nice one

[@natanytzhaki8665]

You dont necessarily have to use the actual functions in your css because these values are known, you can calculate them in any common calculator for the angle you want and plug them in. I did something like that a while ago for creating a ferris wheel with css (its on my channel)

[@brantwedel]

you could generally use a `transform: rotate(45deg) translate(100px, 0px) rotate(-45deg)` for this kind of thing ... but doing it with sin/cos is more flexible for more interesting situations (like the wave at the end)

[@WePiphany]

KP stands for “Ka-Pow” as in mind blown. One of the greatest examples of a great being humbled and passing on the learning to us. Nice work!!

[@bicanmarianvaleriu5400]

Or you can use an --index inline CSS property to count them and calculate the transform (saves more bytes on that SCSS loop).

[@blbezcc]

But how can you update by the --index on each . circle without writing them all manually?

[@IMJamby]

Or just use a CSS counter 🤷‍♂️

[@takhirkikot]

@@IMJamby if only it were that easy. As far as I know, you're only allowed to use counters inside content property. This was and still is a huge bummer, to be honest. But, I believe, I've read somewhere that it might change in future?!

[@j-janz]

For the exact lack of trig in CSS I had to pick *results* of sin/cos of a few angles, switched by some page width breakpoints, to use in a hypotenuse formula I implemented for an angled ribbon on a website.

[@akbelhanim]

One of the best videos! I did not know it, I loved it, I will use it. Thanks🙏

[@ozoindaprince]

I must use it.

[@henrikschmidt8178]

at 17:45 you got a working example but it is was probably by some luck. it should be sin(50deg * #{$i} ) instead if you want to get the angle variating. now it was probably the easeinout that made it a wave.

[@yangenmanuel2659]

Teacher: trigonometry is very important All students: who cares *Me after watching this in my way to be senior frontend engineer* Circles 🤩

[@stevezelaznik5872]

I would have loved to do some labs in high school where we have to play around with image rotation in a video games using pure trig. I don’t know if that would have captured the interest of other teenage boys, but it’s worth a try.

[@haiangle9396]

I don't write CSS anymore but still love your videos. Let's keep going. Thank you!

[@metalstarver642]

You don't need sin/cos for position. You just offset them from center and use transform rotate() with equally spaced angle.

[@Hyperboid]

But then the contents will be rotated, so you'll need to compensate for that, requiring additional elements.

[@czerskip]

For the wave, sin or cos only shift the starting point by the amplitude in the y axis, or by a quarter (90 degrees) on the x axis ;)

[@ThereseTheTerrific]

Could you have used a counter instead of a for-loop for setting the different degrees on the children?

[@hellospenjo]

I had the same thought

[@takhirkikot]

Unfortunately, at the time of writing, you can only use counters inside content property. I mean, technically you are allowed to use it in other places but it will not work inside calc(), for example, which renders it mostly useless outside of content property.

[@Jay-qu7rf]

So Cool! Brilliant video! I love that CSS can do this. I'm wondering now if background patterns could be animated this way to create ripple effects on page backgrounds, etc. The possibilities are endless:)

[@zami001001]

To mirror your original css, the pulsing in and out as a really common use for sin and cos in video games. the pseudocode is basically something like "Size = cos(time) * variance + MiddleSize"

[@novamc7945]

No

[@zami001001]

@@novamc7945 what do you mean no? it wasn't a question it was a statement. I wasn't saying that pseudocode could even be implemented in css if thats what your getting at? I'm not a front end dev I'm a game dev.

[@novamc7945]

​@@zami001001 Sorry, I just wanted to see what type of response I could instigate by simply replying with, "No." I'm also a developer. I understand what you were trying to say in your original comment, and I wasn't trying to deny it. So... yeah. Sorry to confuse you :)

[@UweKeim]

Awesome as always ♥

[@Lilliebeth001]

I absolutely enjoyed this video . Thank you Kevin

[@kinkyolga9668]

Mind blowing! Thanks!

[@2684dennis]

I did it like this, the first rotate is youre starting point, translateX for your X offset (radius) and than the second rotate is te rotation of youre icon so it keeps up straight. and than the rotate in youre from to in your to need to be plus 360 degrees ( a full circle) (note that im a amature and a beginner, i start in september this year the education software developer, couple months ago i knew nothing of programming, i learnd this by youtube and gptchat, not sure if its any good) but this worked for me for the orbital links. @keyframes orbit-1 { from { transform: rotate(0deg) translateX(var(--radius-orbit)); } to { transform: rotate(360deg) translateX(var(--radius-orbit)) rotate(-360deg); } } @keyframes orbit-2 { from { transform: rotate(45deg) translateX(var(--radius-orbit)) rotate(-45deg); } to { transform: rotate(405deg) translateX(var(--radius-orbit)) rotate(-405deg); } }

[@PeteC62]

I think the only reason your left: and top: centered the circles in the parent was because the parent size is twice the circle size. If you changed that ratio, it would no longer work as you have it. What you actually need is (parent-size - circle-size) / 2. With the values to you have, this gives 12.5, which just so happens to be circle-size / 2, but if you changed parent-size to, say, 100, your calculation would no longer be correct.

[@Gr33nCl0n]

came to the comment section to say the same, he was unlucky to choose very specific sizes to not realize his mistake

[@takhirkikot]

Actually I can think of a couple of ways to center those circles which don't require calculations at all. 1) Since all of them are absolutely positioned and have an explicit size, we can center them with: .circle { inset: 0; margin: auto; } 2) We can use flex for centering as well and it works on absolutely positioned children by default as long as you don't mess with any inset properties (left, top, right, bottom) but you can shift them with translate with no problem: .parent { display: flex; justify-content: center; align-items: center; } This one will work with elements that have no explicit sizes. 3) I guess, following the logic of the previous solution, we can also use grid in the same manner: .parent { display: grid; place-content: center; } Using this one we might not even need absolutely positioned children but it will probably be very case-specific.

[@Andrew-Tsegaye]

cool video! glad to watch more

[@paulkoopmans4620]

@8:19 that offset would be the radius of the circle

[@KevinPowell]

Yeah, I should put a comment... was just looking at that and realized it, lol... had it as radius in my thumbnail at least 😅

[@foxxo-dev]

This is a really cool idea! I didint even know that these function exist!

[@kevinphandy2]

@11:16 There was something about how you said "can also use a two instead of through" that had strong @CGPGrey vibes. Not a bad thing at all! Definitely made me do a double take.

[@jonatacioni3404]

with your tips in this video I managed to make the solar system with all the planets around the sun and with the right calculations of relative time for each one of them to go around the sun, with the count of turns of each one

[@RayMerrell68]

Matrices and vectors next then yeah?😎

[@lawrencedoliveiro9104]

Working in terms of 2D vectors is a more natural way to perform operations in 2D space. Then you can work directly in terms of transformations like rotation, translation and scaling of the vector, instead of having to separately calculate x- and y- coordinate numbers. This does mean that those transformations themselves are most naturally expressed in terms of matrices, and some people get scared by that.

[@keviincosmos]

Freaking awesome! 👏. Can't wait for you to learn more so I can see more! 👀😍

[@abacealeycagan2896]

Kevin, you are pure love

[@YTCrazytieguy]

I think in the animation example any constant would have worked instead of sin(50deg), you don't need sin/cos at all. The wavy look is actually coming from 'ease-in-out'

[@Amar11115]

Best concept I learned today

[@marcod.643]

The link to the second example is broken. Just to let you know. 👋

[@ihopethis1]

Super cool! Sinusoid is the word you were looking for loll

[@pulok9909]

Simply awesome.

[@ToadyEN]

Love this, and your evolution of the magic number solution 😊 I studied to compsci and am weak af at math

[@JoaoPaulo-ox6pr]

i had completelly forgot trigonometry, i was good at it at the time i was taught of, but without real life use cases, i forgot it with time. Now, i had to learn it again, after learning Canvas API in JS, and realize that i was nerfing myself. Coincidentally,now i must learn it for an entry exam, but i didn't learn it to enter a university, its just a knowlodge that came in handy for the time i most need it.

[@Nob1ej0n]

17:18 It's a sine wave. Exactly what it looks like. Not very technical. But that's why I appreciate this tutorial. You don't have to understand the math to do some fun tricks.

[@Krakn0]

would it be possible to use counter to mimic the for-loop approach without sass?

[@nandor5258]

This was my first question as well

[@Rocadamis]

I wish you had done this in pure CSS.

[@MattSeremet]

I would avoid sass and just track each circle's index with a style attribute. Define total number of circles as variable in container and let calc handle the rest. Soemthing like calc(var(--i) * 1deg * (360/var(--total)))

[@programingwithali2461]

Thanks Kevin

[@furiousfade4ever211]

Trigonometry is one of my favorite math topic

[@mananabanana]

Sin and Cos are the exact same function but with a phase difference. Cos is 90 degrees ahead of Sin. So, Cos(0) = 1, Cos(90) = 0, Cos(180) = -1, etc. and Sin(0) = 0, Sin(90) = 1, Sin(180) = 0, Sin(270) = -1 etc.

[@HuynhLuong227]

thank you, respect you.

[@NathanHedglin]

Trig is fun! We made an image of an insect to follow our cursor in college.

[@copycutvideo]

it's sad that CSS can't use :nth-child(n) and use the "n" value with a calc function to get the angles

[@hodgesjaso]

Brah! This is pretty awesome thank you!

[@LoStemimatore]

It's possible to do without scss? Maybe with css counter?

[@ozoindaprince]

this mans a god 😭❣️

[@alexandru3472]

You can use flexbox on parent to center everything in that parent div, even if they are with position absolute! :P

[@couldbejake]

I would love a react guide

[@KevinPowell]

I'm definitely not the right person for that 😅

[@TesterAnimal1]

Why? This is CSS. React is just a gigabyte of cruft round HTML and CSS. Learn HTML and CSS. 🙄

[@yiladien]

sin and cos “looked” hard like someone looking at css for the first time. Just like you built up and refactored on this video step by step, that is what sin and cos did. - All sides and angles of a triangle have a relationship. (If one angle and side increases, another angle and side must decrease.) - A Right Triangle sets a lot of rules for the other sides and angles. (e.g If one angle is 30 in a Right Triangle 📐 , the remaining angle must be 60). - The same relationship exists with the length of the sides. - After all the math formulas are built up and then simplified, sin and cos do the math that give the ratio of the sides opposite and next to an angle provided in a Right Triangle(e.g. sin(30), cos(30) is the ratio of the length of the side opposite and next to the angle of 30 in a Right Triangle.) It helps to think if the hypotenuse is length 1, sin and cos give the length of the remaining two sides in a Right Triangle based on one of the angles you provide. And the best part is almost all shapes can be broken into right triangles, including circles, which is why it is so important and expands your capability to solve more problems with accuracy. (It’s been a long time since learning this and I am not using this math daily. I can update or delete my comment if I explained it incorrectly.)

[@davidkerr8722]

Another superb video - thanks! This would be easier using SVG, which has all this stuff built in. It wouldn't need CSS so maybe not something you're interested in though! I used to have great fun doing SVG animations using an Adobe plugin backl in the early 2000's, before decent browser integration! It had no CSS. Maybe I could find some time to do a comparison video :) THanks again, even though I'm not a web developer I like to keep abreast of what CSS can do and your videos are awesome.

[@davidkerr8722]

Looks like I was talking nonsense and SVG won't help. I was dreaming obviously.

[@ozoindaprince]

​@@davidkerr8722 😂

[@jakewood5475]

Trigs along with animation we can create lots of fun stuff

[@ZiafatAli]

OOOOOMG... That's beyond the imagination :)

[@younaskhan5065]

If we increase the size of the circles their center changes? what to do?

[@AlThePal78]

this is so awesome ;)

[@LokiDaFerret]

Just an FYI... Us "comp sci" people also don't say cos as in caustic. We say co-sine. Tan is short for tangent. But ur videos still ROCK! and we won't hold it against your tangent. 🤣😂🤣😂

[@lawrencedoliveiro9104]

Is it a sin to say cos?

[@LokiDaFerret]

@@lawrencedoliveiro9104 LoL. Yes!

[@jakewood5475]

I just tested it out. Needed to update edge to version 111 to get it worked.

[@DoDisturbedTv]

Great video. By the way the code pen for the second example is not available.

[@k16e]

OMG, CSS is the GOAT!

[@dave6012]

Kevin, have you ever checked out The Coding Train? He does lots of fun visualizations using math in programming. If you’re looking for a good trig refresher in a “when am I ever going to use this” way, that’s the channel to watch 🙂

[@KevinPowell]

Love Coding Train! Even met him in person awhile back :D

[@AtHeartEngineer]

@@KevinPowell Nice, he seems like a super nice guy. Front end/visualizations is a small part of my job but I find your videos and his very entertaining and informative so I watch way more than I probably should lol

[@slavenbunijevac6600]

I know this was jus a demo, but dang it, that was neat. Combined with sass uh....

[@mageesam]

Could you use css counter to remove the need for loops and sass?

[@mageesam]

Ah nevermind, probably wouldn’t work without some conversion via preprocessor anyway, since counter returns a string

[@RaveKev]

Unfortunately we can't use the counter inside a calc() - we could get around the looping stuff

[@lucianbumb6690]

This is impressive

[@AndwarMuhammad]

can we make line chart in css using trigonometry?

[@pokefreak2112]

oooo, now I wanna make some CSS-only sine scrollers :-)

[@marcosantonioreyesmedina2364]

Amazing!

[@cypryde]

why dint you used polar coordinates like this: transform: rotate(45deg) translate(120px) rotate(-45deg);

[@kamlenmang8363]

I've learnt css for 2month and this is beyond my knowledge

[@FaizanAnwerAli]

How did you add rotate animation on this?

[@c9der]

Good. Keep It up.

[@oussamab-a7240]

what is your vscode theme ?

[@beinyourguard]

pretty nice!

[@bkgnnlg367]

Hello brother what's the best resources to learn Web development from Very scratch, walking through the right roadmaps without wasting your time on useless stuff, I have seen your html&css course but it's 6 year ago is there any updated course, any advice or suggestions??

[@lotfijbeli1471]

Never thought of using sin/cos outside of trigonometry.

[@ramazan_haz7920]

U are the best man😎😎😎

[@isaacbaptista6207]

Just curious where/how can I check browser support?

[@KevinPowell]

caniuse.com

[@metalstarver642]

@@KevinPowell But in this case sin/cos for css is not there. Stuff from newest spec does not appear fast on caniuse unfortunately..

[@lawrencedoliveiro9104]

MDN is a good place to find both an explanation of the feature and a browser compatibility matrix. Stick to things where all the cells are green (except maybe Safari) ...

[@isaacbaptista6207]

Thanks everyone

[@DDDDDDDDDDDDDDDDDDDDDDDDDDDDD8]

The KZbin algorithm had read what I could be using. woah

[@USONOFAV]

ChatGPT doesn't know these trigo functions yet in CSS 😂

[@codobyte]

FYI: The link to The finished code gives a 404 error

[@domanickharper]

that is so cool

[@technikhil314]

isnt that because sin2t+cos2t=1 representation of circle?

[@KayinAngel]

oh, jeez. i literally just did something similar to this the other day, and didn't even occur to me that you can use sin/cos in css, i used js to do the math and set the custom properties. hmmm.

[@saeentist-hb]

this made me love you ❤️‍🩹

[@i_am_ManojPanda]

Now we can use vector in css lol, 1i +3j => sqroot(10) or 1cos(theta)+3sin(theta)

[@Xamy-]

Noooo my number one weakness 😂

[@Adiu72]

You just need to understand that sin and cos will return values from 1 to -1 in cycles depending on value passed. Sin and cos has offset from each other so will return different value for the same input. So sin 0 -> 0; 90 => 1; 180 => 0; 270 => -1; 360=> 0; 450 =>1.....