Animating a Custom Hamburger Menu

Опубликовано: 31 Март 2021
на канале: Self Teach Me

5,488

260

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-210bec7a...
Flipping Juicy Burgers (CodePen) - https://codepen.io/ainalem/pen/GeMqdP
CodePen - http://codepen.io
Jake Archibald - https://jakearchibald.com/2013/animat...
Radiating Heart SVG Animation - https://codepen.io/ahaywood/pen/RwoaoRZ

📹 OTHER VIDEOS IN THIS SERIES
Playlist:    • Comprehensive Guide to Getting Starte...
Part 1 - Getting Started with SVGs:    • Getting Started with SVGs
Part 2 - SVG in CSS:    • SVGs in CSS
Part 3 - Svgs with Base64 -    • How to Use SVGs with Base64
Part 4 - SVG Sprites -    • How to create and use an SVG Sprite
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