Animated Hamburger Menu in CSS-JS - Build a Responsive Website from Scratch

This course demonstrates how to build an animated hamburger menu and overlay for a responsive website using SCSS and vanilla JavaScript. It follows the process of researching, coding, and troubleshooting CSS transitions, transforms, keyframe animations, opacity, and visibility.

Syllabus

- Intro.
- Research hamburger animation.
- Using a helper CSS class with transform to build animation.
- Adjust transform-origin to fix "X" angles.
- Research transform-origin and adjust styles.
- Write JavaScript to add/remove helper class from hamburger.
- Fine tuning "X" angles.
- Start building overlay.
- Troubleshooting the overlay gradient background.
- Positioning the overlay under the header.
- Update SCSS/JS to put all "open" styles under the header.
- Start working on animating the overlay.
- Create CSS keyframe animation for fading in/out.
- Troubleshooting overlay animation.
- Got fade in animation working!.
- Display properties can't be animated.
- Create fade-out animation.
- Move fade animation to helper class for reusability.
- Troubleshooting fade-out not working.
- Solving with visibility: hidden!.
- Finally working, SO HAPPY :D.
- Closing .