Basic, Intermediate & Pro animated hamburger icons

[@KevinPowell]

There is an issue in Firefox with the first example. Firefox doesn't allow you to style the `x` and `y` - I assumed it did because you can style the `d`... but you know what happens when you assume something. You can use `translateY` instead though.

[@bnstg]

I am playing around with this and trying to animate a x1 cords. This does not seem to be working under chrome. Am I missing something or is this not possible? EDIT, I can change the x1 cord with javascript using the setAttribute method.

[@danish7335]

or u can do `y:45px`

[@maurobono5324]

@@danish7335 this one solved the issue for me too! it would be great to understand why there's this problem with Firefox

[@stevemarshall5249]

@@danish7335 Thanks for this tip, works for me too. It was doing my head in that Firefox could not do this! And it doesn't break any other browsers I've tried either. All good.

[@danish7335]

@@stevemarshall5249 Pleasure

[@anubisai]

Kevin, was just telling my wife how you are the epitome of finding something, focusing on it primarily, and benefiting massively from that focused content. The genius of it is that everyone needs CSS or one of its offshoots. Your dedication alone has taught me an important lesson.

[@KevinPowell]

So glad that you like my approach!

[@EscherSketcher]

1:26 quick tip: script tags can be placed in the head and use the “defer” attribute. No need to place at bottom of body anymore. And if “module” is used (in your case), “defer” is the default behavior.

[@Ba_Dashi]

Also to note: "defer" only works for scripts with an "src" tag. Inline scripts with type=text/javascript cannot be deferred; instead you should use a type=module.

[@YanasChanell]

As an experienced html/css coder I’m still watching your videos sometimes to refresh some details about the stuff I haven’t done for a while, and always find at least some bites of info that I didn’t know or totally forgot ;) It is really nice to see you suggest your viewers the best accessibility practices, I appreciate it a lot. And quality of your videos has grown so much for these years! So a big respect a thank you from me

[@NiceChange]

You make me fly!!!!! CSS is so much fun.. Thanks for being part of my journey. So appreciated.

[@itsPenguinBoy]

One of my proudest moments was constructing the word 'OPEN' out of little coloured lines which each transformed to form the letter forms of the word 'CLOSE' instead of the classic hamburger. So satisfying.

[@RonnieNissan]

mind sharing the code?

[@codingcrashkurse6429]

@@RonnieNissan #2 would be also interested in seeing how it´s done (and obviously stealing it for my website :p)

[@Elisha_GG]

get on codepen's plz and give us the source ;p

[@itsPenguinBoy]

KZbin keeps deleting my replies! But I put it on Kevin's dis cord, in the showcase section.

[@itsPenguinBoy]

It's also searchable on codepen with the title "Open Close Toggle Navigation Animation"

[@aguinaga]

It’s Kevin “The CSS Legend” Powell, Everyone! I love CSS and I love your videos! Great job, my brother.💪I’m a fan! 🙌

[@alexliebhaber3109]

Hey Kevin, I’ve been going through your videos for the past few days, working on building up a library of cool looking css that I can use on my own future projects. I appreciate the work you’ve put in. About to add these cool looking hamburger icons to my list! Thank you!

[@drewb9162]

Totally worth the hour-long watch! Learned so much and excited to try it out. Thanks!

[@sovereignlivingsoul]

here i am playing around with svg's and out pops your video on svg hamburger icons, perfect timing, great video Kevin

[@bikibalami]

I found the solution for the second animation where the rotation was not happening from the center. The reason for that is, when we declare the line like: The "center" of this specific line is on the 40% of the overall box. Its center is NOT the container svg, but itself. And so is the same for the other Line. Hence, I used transform: translateY(-10%) and transform:translateY10%) on the lines respectively, during the hover using a variable. it worked.

[@itsPenguinBoy]

The default fill in svg is "currentcolor" so you can use the color property instead of custom props if you like.

[@resolutelament]

I've started on my web dev journey, and your content and lessons are helping so much. Thank you for all your work and looking forward to much more!

[@Tom-og3fr]

second example is not centered, because tranform origin center takes center of svg, not center of line. if you want to have x in exact center, you can move end points of the line first to center (similar to fist example) and then rotate, or just calculate endpoints of line i x shape and change coordinates to that, without rotation

[@coltonaallen]

Brilliant! Thanks for finding that. My brain was dying trying to figure out why.

[@andyhoogvliets745]

how would that look in code, understand what youre saying just cant picture it #newdevoverhere thnx in advance

[@clevermissfox]

I have a note saying “transform-box: fill-box” sets the transform origin on the elements you’re transforming instead of the svg itself but haven’t played around with it

[@codertips]

For anyone, who didn't understand what this meant Imagine you have two lines in an SVG. The first line is positioned at 40% from the top, and the second line is at 60% from the top. To make transform-origin: center work, you need to move both lines to the center of the SVG at the end of the animation. For the top line, set --top: 10px; For the bottom line, set --top: -10px; Then, in your animation, use transform: translateY(var(--top));. This will move the top line 10px down (to 50px if the SVG height is 100px) and the bottom line 10px up (also to 50px, centering both lines in the SVG viewbox).

[@code_EXP_989]

This was a fun code along. Thanks, Kevin!🤘

[@Encysted]

What a video! Thanks for the work you put into putting these out on a regular basis.

[@Turjak_art]

Thank you for sharing your knowledge with us I appreciate it. This is really pro stuff for free.

[@AntiHeadshot]

Arclength in this case is quite easy, d = 20 -> r = 10, Outline = 2 * Pi * r, so half circle = Pi * r = 31.4159

[@clevermissfox]

35:54 I’m missing something , how did the two lines get translated up to the top to draw out the X? I get that their offset goes to .1 but where is the property that moves their y value?

[@clevermissfox]

After watching through again it was the rotate property

[@joshi1810xx]

30:58 regarding the animation I think you can use 'alternate' to switch between forwards and backwards state so you don't have to build both ones

[@colinmarshall6634]

"Helping you fall in love with CSS" is perfect for this channel. I'm your typical MERN stack dev that finds CSS a boring, clunky chore and prefers frameworks. You're slowly converting me to CSS.

[@blglti]

I loved that, thanks for sharing your knowledge!

[@redshiftdante]

I think you can get rid of the "magic number" if their x and y positions get centered first. Maybe right before they rotate so as they are rotating they shift slightly down and up respectively.

[@j-janz]

31:00 If the point is that no property is set to change, perhaps you can have a separate animation-direction of normal in the first and reverse in the second one. Or, also, play around with the value of alternate, as someone else brought up here, too.

[@Azhtyhx]

@34:22 Essentially the VS Code icon. Kind of neat.

[@clevermissfox]

53:00 I’m confused why he had to add a current-state attribute to run the animation instead of just changing the button-two animation to run when aria-expanded = true (which happens onClick)? Not challenging, just very new to JS and needing clarification why that wouldn’t work.

[@clevermissfox]

Seems like it’s doing something very similar using data-state-= closed, then switching the animation on, on click , with css selector .button-two[data-state=“opened”]. Why can’t that instead be .button-two[aria-expanded=“true”]

[@EmilleJunior]

Wow, great content, I was scared on messing around with SVG before I watched this. Thank you. Btw, at [7:07] didn't you mean half of the "height"? Half of "x" value doesn't make sense

[@sedmidivka]

the falling in love with css is a complete fail with me, but this channel is a win in my book anyway :D Kevin is a staple for web devs

[@amanuelelhanan4716]

Thank you Kevin, I am lucky tbh finding your channel

[@Take-the-Ticket]

Hi Kevin - on my machine, in your codepen, the first hamburger is broken in FF. Working fine in Chrome and Edge.

[@KevinPowell]

Hmm, looks like it doesn't like the `y` property, which also breaks the transition for the opacity... Easy fix would be using translate to get it in the right spot instead, which is a little annoying. I know FF supports animating `d`, I guess I shouldn't have assumed that meant it also did the `x`, `y` etc.

[@I9Chris6I]

Awesome. I thought svgs were way more complex.. thank you for this video ✌🏼

[@CodingAccessibility]

Thank you for including some accessibility content! I hadn't found anything related yet!

[@pavlinapsarsky2819]

Hello Kevin, thank you for another great video

[@brunoais]

11:01: Why do you style svg with attributes instead of CSS?

[@KevinPowell]

I guess it could have been in the CSS... I'm just used to having most SVG stuff in the avg itself I guess

[@brunoais]

@@KevinPowell I'm used to the exact opposite :D. I put most CSS styling in the CSS (makes most sense to me and is somewhat equivalent to how it's done to HTML).

[@jerrydesmornes26]

You're to smart Kevin! Mighty!

[@George-rr1cd]

Today I learnt svg properties can be controlled in css 🤯. Thanks Kevin

[@TheOne-qv3xw]

hey how to bind svgs to a class so in any element i added class that svg will be applied , like bootstrap icons

[@KevinPowell]

The easy way is to do it with a pseudo-element, and use the SVG in the `content: ` instead of leaving it blank. You can just include the path to the SVG, or you can do a URL encoding which is a bit more work, but pretty sure it's better for performance

[@1997Blacksun]

Hello Kevin quick question just started with CSS two days ago. What extensions do I need to add to VS Code in order to replicate what you´re showing in this video. Love the content btw thanks for making CSS even more interesting to me.

[@khoanhn]

This is awesome! Thanks for the video! However I find that transition y attribute of the svg in the first button not working well on IOS / Safari-based browsers. Using transform translate is better on Safari, but not as neat though.

[@gillesfrancois2278]

To use only one animation in reverse and force the browser to trigger it, maybe you can tweak the value of the duration. Like setting 1.01s on the reverse one ? It is a bit hacky but it can help not clone all your closing and openning keyframes Anyway, thanks for your great videos

[@dave6012]

That’s a great hack! Personally I always trigger a reflow with JS by accessing the offsetWidth property on the element in the event handler function.

[@gillesfrancois2278]

@@dave6012 Yeah but here, this is a css only approach (even if we have to handle the click in the end)

[@letshev]

Must-have tutorial! ❤❤❤ Can you combine it with the "popover" attribute?

[@f0xxychen]

When I use "translateY" I got a bug. The "close" animation is broken on every browser, but Firefox. The "rotate" transition part of the top and bottom line works only when I set aria-expanded to true but when I set it to false they jump horizontal and slides back to their original position. In Firefox the animation is bug free.

[@theshelbypalace]

CSS master! thank you!

[@thedacian123]

MAn,you blew my mind again😀!

[@mcglk]

Rather than guessing how long an arc is, for a half-circle arc like the one you're doing here, it's basically the size of the arc, divided by 2 (because it's a half-circle), times π. So your guess of 31 pixels is pretty close; 31.416 pixels would be as close as you'd ever need to specify. It's more complicated when both the x and y coordinates change in the arc, but not _that_ much more complicated.

[@dennis3121]

@KevinPowell Great tutorials, always so helpful!!! I tried to animate your basic button and when I test in Safari, top and bottom bars merge to the center and animation stop there, any simple solution for that? IPhone13 and IPhone14 with IOS 17.2.1

[@mrrolandlawrence]

awesome. its those little touches that give apps that well needed polish :) also love SVG's

[@RonnieNissan]

why didn't you use the y values instead of the rotate on the second one?

[@DirkCzaja]

Length of the Arc is half the circumference of a circle with diameter 20. So 1/2 * 20 * π = 10 * π ~ 31.415

[@Elisha_GG]

Kevin Powell's video is a CCS comedy stand-up and lecture on SVG.

[@keremardicli4013]

Second one is the best. Maybe you can make 4 lines, once hovered they become two and then apply this animation.

[@rkalle66]

Speaking of icons you have to speak of design. Like designers Katsumi Masaru (Olympic games Tokyo 1964 pictograms) or Otl Aicher (Olympic games Munich 1972, Ulm school of design). Icon animation shall emphasize the meaning of icons (and ui actions) and not just playing around. For example let's discuss the use of an envelope instead of a post horn as icon for email. Then you may animate the envelope with wings or with some putting a letter in a post box.

[@andreiKspb]

Kevin you are awesome

[@axMf3qTI]

What kind of glasses do you wear. I noticed that in older videos you don't wear any. I noticed that my eyesight is not as good as it used to be and am wondering how to fix that. I notice I have to focus my eyes more and get tired watching a screen that's never been a issue for me before.

[@thedacian123]

When you defined the svg viewbox coordinates,are all these in device coordinates, i mean pixels or percentages.And if the answer of former question is yes then does not this affect the responsivness?Thank you!

[@KevinPowell]

The viewBox coordinates are... svg related, lol. The SVG system lives in it's own world, and we're exposing a part of it. By saying 0 0 100 100, we're effectively making it a percentage based system, since we're working within a space that is 0 -> 100. So, when I set the x="10", it's going 10% over... but if I had the viewBox=0 0 200 200, it would only be 5% over.

[@thedacian123]

@@KevinPowell OK,but what does svg width attr mean-that svg box is 250 px(user devices coords)?

[@binarycodes]

@@thedacian123 No. Think of it as whatever you set as the area of the svg, the viewBox divides it into an internal grid. So the CSS box gets internally divided into that many sections/sub-pixels which is the SVG world.

[@caleasthetic]

will you ever do a javascript course? i am a beginning front end developer and i have the biggest problems in learning javascript. or maybe you can point me to a good javascript or jquery course?

[@respectthedripkaren4515]

great video kevin.

[@onnot701]

@kevin BUG in first SVG in Firefox. Somehow it does not take the transform-origin: center in Firefox

[@KevinPowell]

yeah, I know you can style the `d` property of SVGs in Firefox, so I just assumed you can do them all, apparently you can't do `x` or `y` (going to add a pinned comment to address this too)... you could do the same thing with translateY though

[@jamesExiledLegends]

what do you use for the live preview?

[@colinpeddle]

how are your pages auto refreshing? I know there's different ways, but i'm curious what you're using. By the way, I love your videos. You're excellent background noise (a high compliment imo! lmao). Your easily absorbed lessons have been a wonderful addition to my learning.

[@KevinPowell]

I'm using Vite for my demos these days, and sometimes I still use the Live Server extension in VS Code

[@daphenomenalz4100]

I use Adobe illustrator and just few days ago i found that we can import path of even complex things i draw into svg on html. Darn it was fun xD, animating my drawing by coding.

[@freemusics4572]

Which framework are you using to style the menu??

[@SurfsUpSeth]

Why would you use aria vs data attributes?

[@extrempty]

i really wanna know what the 5 people who disliked this video were thinking about, like this is Gold

[@donmorris4506]

Kevin, you da man. Love your channel 👍

[@AlThePal78]

now you can do this and show us how to put it in a resposive nav bar :)

[@Lashistoriasdelilith]

awesome video

[@FredUA]

The custom property is unnecessary IMHO. You can use just currentColor inline for SVG and just set up color for the button.

[@andrecoetzer7032]

Just wanted to know if this is in any of your courses?

[@KevinPowell]

No, my courses tend to be more big picture, and I don't really go much into animations

[@andrecoetzer7032]

@@KevinPowell thank you for the response.

[@SirZyPA]

if you wanna use transform-origin: center, why not just move the line to the center with transform: rotate(xdeg) translateY(x); it should still look the same. with these it would just be 10px, and -10px respectively.

[@trinkel8]

Can anyone verify . . . in Safari 16.0 rotate: 45deg will work on a div (and I assume other elements) but I could not get it to work on the SVG lines? The same code works in Firefox and Chrome.

[@jfftck]

The JavaScript to get a bool value instead of a string is have isOpen = getAttribute(‘aria-expanded’) === ‘true’ and that would stay true to conventions with variables starting with is/has is a bool. This would also give you the ability to setAttribute(‘aria-expanded’, !isOpen);

[@KevinPowell]

Ah, yeah, that's great 👍

[@rohittomar4187]

@@KevinPowell I tried this not working for me

[@sampleyt9457]

did i just watch a full 1 hour css tutorial and... enjoyed it???

[@Doky5]

0:13 Good tip: don't put your tone in the middle of a sentence. 👍

[@firestormde3]

Hi Kevin, Very good video, Could you make one about how to make svg ? Thank you 🙂

[@KevinPowell]

I have a series on svgs where I cover the basics. It's a bit old, but I think it stands up well

[@Neuer_Alias_erstellen]

if he had one button more there would be only one line 😆 - good vid

[@dgenerationx5220]

Please do videos on web accessibility.

[@anouar9259]

i appreciate it

[@damjandjordjevic1994]

Regarding the magic number, I watched a video by Web Dev Simplified titled "How To Build An Animated Hamburger Menu With Only CSS", and at 15 minutes, he explains the math behind it(which I still don't understand xD)

[@fiddler-dv4or]

Has anyone else had issues with the first example in Safari? The animation is completely different.

[@mormatus]

`fill="currentColor"` + CSS `color: xxx` is a bit more convenient ways to control button's color, than using CSS props directly

[@ksrele]

Why does sound on your videos are so bad? Are you using some noise canceling filter?

[@KevinPowell]

Nope, and I didn't think it was too bad??

[@ksrele]

@@KevinPowell Well, to be honest it is not too bad but it is kind muddy - not sharp, I can't explain it and English is not my first language... Like your sound is too compressed - low bitrate... I still think that you have turn on some kind noise cancelation while recording that you are not aware of

[@HomerJSimpson999]

why are you using const instead of var in javascript? couldn't you just avoid javascript totally? so instead of making an and :active for the css. isn't it a bit too much code for a simple burger?

[@KevinPowell]

Well, realistically, if you have a hamburger, it's to open/close a menu, in which case, you should be using a button and not a link. Doing this with a link and using :active would make it faster to make for the examples, but wouldn't really be the best advice in the long run... but that's also why I used hover at the start and saved the JS for the end, so you could skip that if you wanted to. Also, in general in JS, `var` is a little bit "out of date". You can still use it, but it's generally safer to either use `let` or `const`. If it's a variable that needs to be updated, you use `let`, if the value never changes, then `const`. In this case, each time the function runs, the value is static, so const is perfect.

[@HomerJSimpson999]

@@KevinPowell if i use the attribute role="button" on the a-element it should be fine, or is it not? when i learned PHP my teacher told me to never if possible use static variables except with paths (with define in PHP). was my teacher wrong? i also learned it with other languages, too. I'm a bit confused now

[@KevinPowell]

@@HomerJSimpson999 role="button" is a very last case that needs a lot to add in the other expected functionality of a button, like keyboard interactions as well. An a tag should be a link, going somewhere, a button should be a button that you add interaction with JS.

[@USONOFAV]

I tried this on ChatGPT it gave me a correct hamburger icon but it didn't animate into x properly. ...so our job is still safe. for now. lol

[@LuizAlbertoSoares]

Congratulations.

[@AnweshAdhikari]

♥️

[@elitedire4k]

can you do a video on styling tables in css.

[@KevinPowell]

seems to be one of the most common requests, so I guess I'll have to do it at one point, lol

[@mcafee524]

Just animate the d attribute with gsap and copilot bro. Ezz 🙂

[@technoph1le]

Kevin Powell posted 1 hour long video on KZbin. Also, Web Dev Simplified posted 1 hour long video. Just saying :)

[@KevinPowell]

That Kyle is copying me? 😉😂

[@Z3ROR]

Nice 'Hamurger' icons! :P (yes, Kevin you made a typo)

[@liquidmasl]

I feel like frontend devs are allergic to math :p why playing around with numbers when you can just.. calculate them real easy haha but it works, so i should probably learn from this

[@TristanGrimaux]

The link to the "complete responsive navigation" is actually here kzbin.info/www/bejne/fpOlfqNsrrqLhZI

[@Alex_Eicher]

Nice title-tag of the index.html: *Hamurger icons* (typo on the right side)

[@mochou_p]

yummy

[@JimiSimpson]

Thanks Kevin, your ability, passion and patience are much appreciated. As a comedic aside, every time you said 'hamburger', this scene came to mind ... kzbin.info/www/bejne/gme0aop-l8ySeas 😄

[@ReligionAndMaterialismDebunked]

Early :3

[@juliusuwuigbe7743]

Is anyone scared like me? I kept saying in my mind "this is too much". I am new to CSS.

[@AlexanderMoyer-k3b]

very kewl videos, friend. please be one of my professors @ college lol :/ learn a lot for free from youtube learn nothing for a lot of $ @ college fml!

[@TheOne-qv3xw]

NO matter how long this videos will be , 1week or 1 month but create please , upload it on youtube or udemy your choice Please make or start one course For HTML Css , which is devided into three parts , first is beginner where all html and css properties uses included , second intermediate , where you will teach how to design and use HTML css in realtime scenerio , making template and best way to make a template how and using root essential and also shadowdom css etc, Higher level , where you will designed the complex template like fully responsive carousel and if there are otherways for it those also , yeah i know lots of ways are there, but my main focus is the way which can be adopted here everyonce know button , but what actaully a button should contain all effects a button should have , it is just like engineering , see people code there button but they forgot main thing they design it and on hover also the add some css and make it beautiful , but on click a button should have some effects so that a user will feel that he clicked the button , so things like that will come in higher level

[@KevinPowell]

I wouldn't put shadowdom in intermediate, but maybe that's just me 😅. I am working on some courses now, but don't hold your breath as I'm pretty slow with them, lol.

[@foxxo-dev]

ARGHH ALMOST FIRST BECAME THIRD