Completed
- Move fade animation to helper class for reusability
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Animated Hamburger Menu in CSS-JS - Build a Responsive Website from Scratch
Automatically move to the next video in the Classroom when playback concludes
- 1 - Intro
- 2 - Research hamburger animation
- 3 - Using a helper CSS class with transform to build animation
- 4 - Adjust transform-origin to fix "X" angles
- 5 - Research transform-origin and adjust styles
- 6 - Write JavaScript to add/remove helper class from hamburger
- 7 - Fine tuning "X" angles
- 8 - Start building overlay
- 9 - Troubleshooting the overlay gradient background
- 10 - Positioning the overlay under the header
- 11 - Update SCSS/JS to put all "open" styles under the header
- 12 - Start working on animating the overlay
- 13 - Create CSS keyframe animation for fading in/out
- 14 - Troubleshooting overlay animation
- 15 - Got fade in animation working!
- 16 - Display properties can't be animated
- 17 - Create fade-out animation
- 18 - Move fade animation to helper class for reusability
- 19 - Troubleshooting fade-out not working
- 20 - Solving with visibility: hidden!
- 21 - Finally working, SO HAPPY :D
- 22 - Closing
