Can I create this tricky orbiting icon animation?

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:08 - Getting started
02:49 - Writing the HTML
06:02 - Generating the colours
14:09 - Starting to style things
15:22 - The center image
19:35 - The li circles
43:24 - Adding the rotation
01:04:20 - Pausing the animation on hover
01:08:51 - Adding the throbbing animation

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

The `scale:` property worked for me because I had the Experimental Web Platform features flag turned on in Chrome. It is supported in Firefox and Safari, but still behind a flag in Chrome as they work out performance issues from the bug reports I looked at. If you'd like to enable it, you can find the flag by going to chrome://flags and searching for it in the search that shows up.

[AirforcLuckyThirteen]

Hey Kevin, your videos actually helped me go from "I wish I was writing JS" to "This is not so bad" when talking about CSS, thanks again for making them!

[kenbee]

Man, you really inspire me as a frontend dev. Anything that I don't know or forgot I would always go to your channel. Thank you so much Kevin

[HamzaChelbat]

Great video Kevin! To position the circles around the image, I came with this solution:
CSS:
.container {
--outline-radius: 400px;
width: calc(var(--outline-radius) * 2);
aspect-ratio: 1;
border-radius: 50%;
background: lightcoral;
position: relative;

.item {
--item-radius: 100px;
width: calc(var(--item-radius) * 2);
aspect-ratio: 1;
border-radius: 50%;
background: lightblue;
position: absolute;
display: grid;
place-content: center;
left: calc((var(--outline-radius) - var(--item-radius)) + ((var(--outline-radius) - var(--item-radius)) * sin((var(--position) - 1) * (360deg /
bottom: calc((var(--outline-radius) - var(--item-radius)) + ((var(--outline-radius) - var(--item-radius)) * cos((var(--position) - 1) * (360deg /
}
}

HTML:
<div class="container" style="--quantity: 8">
<div class="item" style="--position: 1">1</div>
<div class="item" style="--position: 2">2</div>
<div class="item" style="--position: 3">3</div>
<div class="item" style="--position: 4">4</div>
<div class="item" style="--position: 5">5</div>
<div class="item" style="--position: 6">6</div>
<div class="item" style="--position: 7">7</div>
<div class="item" style="--position: 8">8</div>
</div>


With this solution, no need to had-coding and the items are positioned in a perfect circle.
I enjoyed the challenge very much. Thanks for your great job.

[zmodem]

@1:32:10 -

At the bottom of the window, and above the "&:hover", there's "--thob-play-state: play;", which was supposed to be "--throb-play-state: play;"

Missing the 'r' in the "--thob-..."

---

No big deal! Kevin, I've learned so much from your videos, but the best thing I've learned is how to just tinker and forget about making mistakes; mistakes are important, and they help us gain wisdom alongside knowledge. Your approach is so calming that it makes me more excited to fidget around! I've been dev'ing since 1996, as a hobby, side projects, and as a freelancer. You inspire me to keep up with the newer updates to the design cores and adapt to not living in the past (no, I'm not still using <table></table> for layouts, lol).

[seeds.ffmpeg]

I've watched so many of your videos so far, I'm the frontend developer I am today because of your channel, thank you so much. I finally enjoy and love coding CSS.

[Victor_Marius]

For positioning of all icons could set the li width and height to 36rem, then center to body below the woman/man images. The image icon and paragraph will need an extra wrapping [ul > li > div.icon-12rem > (img, p)] that will be 12rem diagonally circle translated to right (and its rightmost point aligned to the li rightmost side). Then to place the other list items you rotate them (if they are only 8, by 360/8 * [0....7] = 0, 45, 90, 135, 180, 225, 270, 315) and counter rotate the li > div.icon-12rem wrappers (with 0, -45, -90....)

[denniscaylorboc]

I'm a junior frontend dev and you inspires me a lot not to give up challenges using only css. keep on making more contents pls.

[JoshAntBrown]

Great video! The math problem of getting the correct x and y was a fun challenge. Ended up coming up with this in sass as possible solve, could probably be tided up so it's a bit more re-usable the 45deg is 360 divided by number of list items.

@for $counter from 0 through 7 {
li:nth-child(#{$counter + 1}) {
transform: translate(
15rem * math.cos(45deg * $counter),
15rem * math.sin(45deg * $counter)
);
}
}

[zachjensz]

🎉 🥳 Congratulations on 500, 000+ Subscribers Kevin! 🎊 🍻

[JuanMoisesTorrijos]

After googling: how to find the coordinates of a point on a circle, I noticed that to get the position of the translate property for the even lis, you need to multiply the radius by 0.707 (which is the sin of 45º). So, it would be 15rem * 0.707 = 10.605rem. 🤓

[maxde]

Awesome presentation! In the end it seemed to be "simple", but the moments in between when you went on like "why is this moving" reminded me again why I'm no frontend developer - I'm not gonna try it, I prefer to keep my sanity, or what's left of it.

[DominikGuzowski]

This channel literally made me turn from pulling my hair out working with CSS to having uncontrollable urges to style my friends projects because he doesn't care to make it look nice 😂. Thanks Kevin!

[flashbond]

For the exact radial placement, coordinate formula is: (x, y) = (radius*sin(radian(angle)), radius*cos(radian(angle))). I don't know if sass supports trigonametric functions but in your case, a for loop can be defined where the radius is 15rem with 45-degree angle incremenents.

[siddharthshekhar]

To arrange the items in a perfect circle, instead of hardcoding magic numbers in translate(), we could use rotations, which allows us to even have an arbitrary number of items!

$item-count: 8;
@for $i from 1 through $item-count {
$angle: (360deg / $item-count) * $i;

.item:nth-child(#{$i}) {
transform:
translate(-50%, -50%)

rotate(calc(-1 * #{$angle}))
translate(15rem)
rotate(#{$angle});
}
}

The first "translate" is just for centering.

The magic happens in the remaining 3 transforms:
The first "rotate" causes the X axis itself to be rotated.
So, the subsequent "translate" now moves the element not horizontally, but along the angle by which we rotated!
With this, the element is now at the right location, but it still looks rotated.
So the last "rotate" is opposite to the first one - now the element visually has no overall rotation!

Sandwiching the "translate" between two opposite rotations this way allows us to translate along any direction with a fixed distance.

Using "translate" without the two "rotate"s would require us to know the exact X and Y distances to translate with, which can only be calculated using cos() and sin().

[razorjhon]

wanted to do something like this for 3 days straight and i gave up trying and you posted this video in the right time, thank you so much man i love you ♥

[vladimirpetroski]

Kevin...you're amazing and you deserve all the praise and followers! That laugh...at 17:14 ...I haven't laughed that hard this year!

[mrkhan]

Hey Kevin,
I really love your work. You did make me fall in love with CSS. I get to learn a lot from your work. Keep making such awesome videos.

[rohitsanwariya]

This is the most fun i ever had on any follow along tutorial.

[william]

Great video!
Btw, you can use a negative animation-delay on the itens, so that the animations will be offset from each other but will not have the start delay when the page refreshes.