That's a great point, I could have done that instead. For people visiting in the future, this would also work: element.onclick = () => { element.classList.toggle("x"); };
Thank you, I really like your friendly videos! :-) I followed this along and learned quite a bit, still trying to wrap my head around these CSS properties, I'll read the blog post that you listed. Thanks again, fantastic work! 👏
This is a super cool effect!! Thank you for showing how to do this, I can’t wait to give it a go. This is the first video of yours I’ve watched so far, but I didn’t realise you could do this with svg’s!
@@SelfTeachMe nothing specific right now. I hope you continue to enjoy creating this great content! I’ve been viewing your previous content in hope that it helps me out. Subscribed :)
Yes, I still get this error. and no, I haven't quite figured it out yet. However, I did find out that the SVG is causing the problem and that it has something to do with the "Structured Cloning Algorithm". Note: Although Firefox throws this error, the SVG is displayed correctly and the animation works fine.
Thanks for the feedback. I might use Styled Components in some of my videos, but for most demo projects, like these, Styled Components is overkill. Is there something in particular that you're struggling with using Styled Components? All the concepts should translate.
Also, the first div tag is missing an i and the closing button tag is missing a /. The information shared on this video is still top notch. Just wanted to share in case anyone was confused, I think codepen automatically fixes these typos.
Why dont u use class list toggle instead of add and remove? Its a lot cleaner and faster
That's a great point, I could have done that instead.
For people visiting in the future, this would also work:
element.onclick = () => {
element.classList.toggle("x");
};
This is SO COOL!!!!
Glad you liked it!
So cool! Love seeing the whole process from design to building!
Thanks!!
Wowwwwwww
Thank you, I really like your friendly videos! :-)
I followed this along and learned quite a bit, still trying to wrap my head around these CSS properties, I'll read the blog post that you listed. Thanks again, fantastic work! 👏
Great, is very cool Thanks
Glad you liked it.
Let's goooooo! Thanks for this Amy!
Awesome, Jack! Glad you liked it
wtf this is sick
😂 thanks!
thank you...
You're welcome!
This is the best menu icon animation I have seen. This is going to be in my next project
Thanks, Avneesh!!
this is cooool
Glad you liked it Wael
Love the energy and editing!
Thank you!! ❤️
Thank you!! ❤️
This was super awesome
Just found your channel out of nowhere, and now here I am, surfing through all your videos
Much love ❤️❤️
Thank you! -- Glad you're enjoying them.
your thumbnail it just looks viciously terrifying.
😂 ... this is actually one of my favorite thumbnails.
This is a super cool effect!! Thank you for showing how to do this, I can’t wait to give it a go. This is the first video of yours I’ve watched so far, but I didn’t realise you could do this with svg’s!
Glad you liked this!
what are the dimensions of canvas for making these icons?
I honestly can't remember the size in this video, but I usually use 32x32
I love this. As someone that’s trying to transition from graphic design to web design, this helps a TON.
Awesome! Glad to hear that! ... I'd like to create more videos on UI / UX. Is there anything specific you're looking for? or need help with?
@@SelfTeachMe nothing specific right now. I hope you continue to enjoy creating this great content! I’ve been viewing your previous content in hope that it helps me out. Subscribed :)
I wish I had found your channel sooner Amy. Truly fantastic content with great energy
Does anybody else get this error "DataCloneError: The object could not be cloned." in the console in Firefox?
Sorry I'm a little late responding, do you still get this error? Were you able to figure it out?
Yes, I still get this error. and no, I haven't quite figured it out yet. However, I did find out that the SVG is causing the problem and that it has something to do with the "Structured Cloning Algorithm". Note: Although Firefox throws this error, the SVG is displayed correctly and the animation works fine.
Hi, can you use styled-components in you tutorials, that can be very helpful
Thanks for the feedback. I might use Styled Components in some of my videos, but for most demo projects, like these, Styled Components is overkill. Is there something in particular that you're struggling with using Styled Components? All the concepts should translate.
@@SelfTeachMe Struggling with nested style properties and some concepts. Thank you very much for getting back
Goated with the sauce.
Also, the first div tag is missing an i and the closing button tag is missing a /. The information shared on this video is still top notch. Just wanted to share in case anyone was confused, I think codepen automatically fixes these typos.
This is amazing
Thanks!!
Love this - just did it myself and it worked a treat- thank you !!
Awesome! 🙌🏻
Would you be able to show how to implement this as a responsive working hamburger menu with a regular top navigation menu?
Cleanest explanations! Keep going pls!
Thank you!! … anything in particular you’d like to see more of?
@@SelfTeachMe Thank you for asking. Creating CSS layouts always hard for me. I mean maybe more CSS content :)
@@TheYusuf10 I can definitely do that!