animations - hamburger menu
Hey,
So I’m pretty new to this stuff. I watched the video on hamburger menu animations. Is there an easy way to design these animations? I don’t even know where to start. I haven’t done any animations before. Are there any resources I should be looking at? Software that could help me visualize the animation and then get the path data to put in my code?
Any help is much appreciated.
Thanks 🙂
6 Replies
there are a ton of resources on youtube, including our fave KPow https://www.youtube.com/watch?v=fpRqQkApeFk
it also depends on what you want your animation to do; when you say hamburger menu are you trying to animate the menu icon itself
Kevin Powell
YouTube
Can I make this animated navigation design with HTML & CSS?
This was harder than I expected it to be 😅
✅ The design on Dribble: https://dribbble.com/shots/2980874-Slopes-Website
✅ tubik's Dribbble profile: https://dribbble.com/Tubik
✅ My Twitch channel: https://www.twitch.tv/kevinpowellcss
✅ The GitHub repo: https://github.com/kevin-powell/dribbble-slope-clone
#css
--
Come hang out with other ...
Kevin Powell
YouTube
Basic, Intermediate & Pro animated hamburger icons
SVG’s open up new possibilities that we can’t do with regular divs or spans, and they are a great way to make hamburger menu’s a little bit more interesting!
🔗 Links
✅ SVG path builder - https://mavo.io/demos/svgpath/
✅ Code from this video: https://codepen.io/kevinpowell/pen/gOKpOyy
⌚ Timestamps
00:00 - Introduction
01:01 - What we’re start...
Kevin Powell
YouTube
Responsive navbar tutorial using HTML CSS & JS
You can find the Frontend Mentor project here: https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3
And the free Scrimba course here: https://scrimba.com/learn/spacetravel
🔗 Links
✅ Why I use HSL: https://youtu.be/Ab9pHqhsfcc
✅ More on feature queries (@supports): https://youtu.be/wPI8CEoheSk
✅ More info on .sr-...
Web Dev Simplified
YouTube
How To Build An Animated Hamburger Menu With Only CSS
Free CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html
Hamburger menus are incredibly popular in sites, but building one that is animated, responsive, and uses no JavaScript is quite difficult. In this video I will show you how to build a hamburger menu with only CSS that is fully responsive and animated.
📚 M...
if you search 'hamburger menu animation css' or 'mobile nav animation' there is no shortage of videos on this subject
Thanks for the reply. The animation I was trying to do related to path data. I believe it was the 3rd one in that “basic, intermediate and pro” video you’ve linked. So I guess I was confused as to how you “draw” out that design. There aren’t many examples that I could find relating to that style of animation. I’ll watch the videos you’ve linked anyway. Maybe I need to start with a simpler design 😂
It’s the icon I’m trying to animate. From the 3 lines to an X
Do you have a codepen with your current code ? If it’s the menu then you can simplify by using one svg with 3 lines then you rotate and translate them (and hide the middle one for the X ) to animate betweeen the hamburger menu state and the X state.
Either the KPow video or web dev simplified video should help. If they don’t post the relevant code into codepen and we can try to see what’s wrong