Animated Hamburger Menu in CSS/JS | Build a responsive website from scratch (Part 2)
🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af...
In this video you can watch me continue building a responsive website from scratch using HTML, CSS (SCSS) and vanilla JavaScript!
This video, Part 2, covers building the hamburger and overlay animation. You get to see the whole process from writing the code, seeing something not working right, researching and troubleshooting and finally finding the solution to the problem. I talk through my thought process and why I'm doing certain things-- I hope it's helpful for you!
Full playlist here: • Build a website from scratch - Fronte...
Challenge on Frontend Mentor: https://www.frontendmentor.io/challen...
Source code on GitHub: https://github.com/thecodercoder/fem-...
See the final website: https://codercoder-easybank.pages.dev/
0:00 - Intro
0:44 - Research hamburger animation
3:15 - Using a helper CSS class with transform to build animation
4:54 - Adjust transform-origin to fix "X" angles
5:47 - Research transform-origin and adjust styles
6:44 - Write JavaScript to add/remove helper class from hamburger
8:22 - Fine tuning "X" angles
8:58 - Start building overlay
11:15 - Troubleshooting the overlay gradient background
12:35 - Positioning the overlay under the header
13:25 - Update SCSS/JS to put all "open" styles under the header
15:30 - Start working on animating the overlay
16:05 - Create CSS keyframe animation for fading in/out
20:00 - Troubleshooting overlay animation
23:00 - Got fade in animation working!
23:13 - Display properties can't be animated
24:17 - Create fade-out animation
25:10 - Move fade animation to helper class for reusability
28:07 - Troubleshooting fade-out not working
29:37 - Solving with visibility: hidden!
31:04 - Finally working, SO HAPPY :D
31:49 - Closing
_____________________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w
💻 Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming
