Animating a Custom Hamburger Menu

In this video, we create a custom hamburger animation. We build the SVG in Illustrator and then animate it -- mostly in CSS, with a touch of vanilla JavaScript.
0:00 Intro
1:18 Creating the icon within Illustrator
4:35 Exporting the SVG out of Illustrator
5:43 Getting our SVG into CodePen
5:57 Cleaning up our SVG
8:05 Explaining stroke-dasharray and stroke-dashoffset
12:04 Adding JavaScript to control the adding and removing a class.
15:04 Other animation examples, using the same concepts
🎁 FREE SVG CHEAT SHEET: https://selfteachme.ck.page/ee58f2eb85
7️⃣ Ways to use SVGs
✅ Pros and ❌ Cons for each method
💎 Tips for implementing
🔗 LINKS
* The 🍔 menu: https://uxdesign.cc/the-menu-210bec7ad80c
* Flipping Juicy Burgers (CodePen) - https://codepen.io/ainalem/pen/GeMqdP
* CodePen - http://codepen.io
* Jake Archibald - https://jakearchibald.com/2013/animated-line-drawing-svg/
* Radiating Heart SVG Animation - https://codepen.io/ahaywood/pen/RwoaoRZ
📹 OTHER VIDEOS IN THIS SERIES
+ Playlist: https://www.youtube.com/playlist?list=PLrz61zkUHJJHFhsK3BKi-G5FjBOsO-aOY
+ Part 1 - Getting Started with SVGs: https://www.youtube.com/watch?v=hlVqUG1xQJg
+ Part 2 - SVG in CSS: https://youtu.be/_ghOZ9LD9JY
+ Part 3 - Svgs with Base64 - https://youtu.be/HxfgLyjPq8o
+ Part 4 - SVG Sprites - https://www.youtube.com/watch?v=LgfLpEHqgGU&t=22s
+ Part 5 - Animating an SVG Hamburger - You are here, THAT'S THIS VIDEO
🤖 CODE
* Final CodePen - https://codepen.io/ahaywood/pen/BapKwJy
👉🏻 Get Updates and Exclusive content at http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com

Видео Animating a Custom Hamburger Menu канала Self Teach Me