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: selfteachme.ck.page/ee58f2eb85
7️⃣ Ways to use SVGs
✅ Pros and ❌ Cons for each method
💎 Tips for implementing
🔗 LINKS
* The 🍔 menu: uxdesign.cc/the-menu-210bec7a...
* Flipping Juicy Burgers (CodePen) - codepen.io/ainalem/pen/GeMqdP
* CodePen - codepen.io
* Jake Archibald - jakearchibald.com/2013/animat...
* Radiating Heart SVG Animation - codepen.io/ahaywood/pen/RwoaoRZ
📹 OTHER VIDEOS IN THIS SERIES
+ Playlist: • Comprehensive Guide to...
+ 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 B...
+ Part 4 - SVG Sprites - • How to create and use ...
+ Part 5 - Animating an SVG Hamburger - You are here, THAT'S THIS VIDEO
🤖 CODE
* Final CodePen - codepen.io/ahaywood/pen/BapKwJy
👉🏻 Get Updates and Exclusive content at selfteach.me
💥 SelfTeach.me is a Zeal show: codingzeal.com
Негізгі бет Animating a Custom Hamburger Menu
No video
Пікірлер: 54