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.
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 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.
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.
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.
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.
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
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.
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!
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.
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
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
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).
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.
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.
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?
"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.
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
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.
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.
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.
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.
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”]
@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
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.
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
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.
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.
instead of transform origin, just use the flex box. display: flex; align-items:center; justify-content:center; Even if those elements have position absolut, flex box will still work. But you'll need to do it properly. At almost all animations that needs to be in the center, I use flex box.
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.
@@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).
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
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.
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?
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
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)
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.
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!
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 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.
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.
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.
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);
Safari bites off a small chunk of the top bar of the third button when it's closed 🤔 Changing the stroke-dasharray to 59 33 59 300 on .button-three .line did the trick for me!
@@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
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
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?
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.
@@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
@@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.
Thanks Kevin, your ability, passion and patience are much appreciated. As a comedic aside, every time you said 'hamburger', this scene came to mind ... th-cam.com/video/L6Q9WHbg_CI/w-d-xo.html 😄
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!
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.
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.
or u can do `y:45px`
@@danish7335 this one solved the issue for me too! it would be great to understand why there's this problem with Firefox
@@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.
@@stevemarshall5249 Pleasure
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.
So glad that you like my approach!
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.
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.
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
You make me fly!!!!! CSS is so much fun.. Thanks for being part of my journey. So appreciated.
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.
mind sharing the code?
@@RonnieNissan #2 would be also interested in seeing how it´s done (and obviously stealing it for my website :p)
get on codepen's plz and give us the source ;p
TH-cam keeps deleting my replies! But I put it on Kevin's dis cord, in the showcase section.
It's also searchable on codepen with the title "Open Close Toggle Navigation Animation"
The default fill in svg is "currentcolor" so you can use the color property instead of custom props if you like.
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!
Totally worth the hour-long watch! Learned so much and excited to try it out. Thanks!
here i am playing around with svg's and out pops your video on svg hamburger icons, perfect timing, great video Kevin
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!
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.
Arclength in this case is quite easy, d = 20 -> r = 10, Outline = 2 * Pi * r, so half circle = Pi * r = 31.4159
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
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
Brilliant! Thanks for finding that. My brain was dying trying to figure out why.
how would that look in code, understand what youre saying just cant picture it #newdevoverhere
thnx in advance
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
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).
@34:22 Essentially the VS Code icon. Kind of neat.
What a video! Thanks for the work you put into putting these out on a regular basis.
This was a fun code along. Thanks, Kevin!🤘
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.
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.
It’s Kevin “The CSS Legend” Powell, Everyone! I love CSS and I love your videos! Great job, my brother.💪I’m a fan! 🙌
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?
After watching through again it was the rotate property
"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.
Thank you for sharing your knowledge with us I appreciate it. This is really pro stuff for free.
I loved that, thanks for sharing your knowledge!
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
Hi Kevin - on my machine, in your codepen, the first hamburger is broken in FF. Working fine in Chrome and Edge.
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.
Must-have tutorial! ❤❤❤ Can you combine it with the "popover" attribute?
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
Thank you Kevin, I am lucky tbh finding your channel
Awesome. I thought svgs were way more complex.. thank you for this video ✌🏼
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.
Thank you for including some accessibility content! I hadn't found anything related yet!
You're to smart Kevin! Mighty!
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.
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.
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”]
Today I learnt svg properties can be controlled in css 🤯. Thanks Kevin
Kevin Powell's video is a CCS comedy stand-up and lecture on SVG.
Hello Kevin, thank you for another great video
CSS master! thank you!
@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
Second one is the best. Maybe you can make 4 lines, once hovered they become two and then apply this animation.
awesome. its those little touches that give apps that well needed polish :) also love SVG's
MAn,you blew my mind again😀!
Length of the Arc is half the circumference of a circle with diameter 20. So 1/2 * 20 * π = 10 * π ~ 31.415
i really wanna know what the 5 people who disliked this video were thinking about, like this is Gold
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.
Kevin you are awesome
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
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.
@@dave6012 Yeah but here, this is a css only approach (even if we have to handle the click in the end)
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.
great video kevin.
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.
I'm using Vite for my demos these days, and sometimes I still use the Live Server extension in VS Code
now you can do this and show us how to put it in a resposive nav bar :)
instead of transform origin, just use the flex box. display: flex; align-items:center; justify-content:center; Even if those elements have position absolut, flex box will still work. But you'll need to do it properly. At almost all animations that needs to be in the center, I use flex box.
did i just watch a full 1 hour css tutorial and... enjoyed it???
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.
awesome video
if he had one button more there would be only one line 😆 - good vid
11:01: Why do you style svg with attributes instead of CSS?
I guess it could have been in the CSS... I'm just used to having most SVG stuff in the avg itself I guess
@@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).
Hi Kevin,
Very good video,
Could you make one about how to make svg ?
Thank you 🙂
I have a series on svgs where I cover the basics. It's a bit old, but I think it stands up well
Kevin, you da man. Love your channel 👍
hey how to bind svgs to a class so in any element i added class that svg will be applied , like bootstrap icons
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
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.
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?
@kevin BUG in first SVG in Firefox. Somehow it does not take the transform-origin: center in Firefox
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
why didn't you use the y values instead of the rotate on the second one?
Please do videos on web accessibility.
Which framework are you using to style the menu??
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)
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.
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!
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.
@@KevinPowell OK,but what does svg width attr mean-that svg box is 250 px(user devices coords)?
@@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.
0:13 Good tip: don't put your tone in the middle of a sentence. 👍
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.
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.
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);
Ah, yeah, that's great 👍
@@KevinPowell I tried this not working for me
`fill="currentColor"` + CSS `color: xxx` is a bit more convenient ways to control button's color, than using CSS props directly
The custom property is unnecessary IMHO. You can use just currentColor inline for SVG and just set up color for the button.
i appreciate it
what do you use for the live preview?
Just wanted to know if this is in any of your courses?
No, my courses tend to be more big picture, and I don't really go much into animations
@@KevinPowell thank you for the response.
Why would you use aria vs data attributes?
Congratulations.
Safari bites off a small chunk of the top bar of the third button when it's closed 🤔
Changing the stroke-dasharray to 59 33 59 300 on .button-three .line did the trick for me!
can you do a video on styling tables in css.
seems to be one of the most common requests, so I guess I'll have to do it at one point, lol
Has anyone else had issues with the first example in Safari? The animation is completely different.
Nice title-tag of the index.html: *Hamurger icons* (typo on the right side)
Nice 'Hamurger' icons! :P (yes, Kevin you made a typo)
Just animate the d attribute with gsap and copilot bro. Ezz 🙂
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
Why does sound on your videos are so bad? Are you using some noise canceling filter?
Nope, and I didn't think it was too bad??
@@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
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
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?
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.
@@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
@@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.
♥️
The link to the "complete responsive navigation" is actually here th-cam.com/video/HbBMp6yUXO0/w-d-xo.html
Kevin Powell posted 1 hour long video on TH-cam. Also, Web Dev Simplified posted 1 hour long video.
Just saying :)
That Kyle is copying me? 😉😂
Thanks Kevin, your ability, passion and patience are much appreciated.
As a comedic aside, every time you said 'hamburger', this scene came to mind ... th-cam.com/video/L6Q9WHbg_CI/w-d-xo.html 😄
yummy
Early :3
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!
Is anyone scared like me? I kept saying in my mind "this is too much".
I am new to CSS.