Building Hamburger Animations in Webflow

[@MrJonah9999]

Genuinely fantastic content. Thank you.

[@TheFlyingEpergne]

You are godly at this stuff timothy

[@pablogday]

You are too good at this. Damn.

[@lukasschorn]

Brilliant!!! 🤩 Thank you for sharing your immense knowledge and these super useful components! 🐐 Will use them in all my future Lumos builds ❤

[@AmanSharma-dt7fh]

wow, this is amazing

[@peterifeolwaayeni3067]

God knows i needed this

[@sphered73]

Oh boy, I've created a cloneable for CSS hamburgers but haven’t released it yet as it needs some last touches. It’s fully customizable as well, basically the same idea. I took inspiration from Jonathan Suh’s collection. I’ll release it soon for everyone, although my excitement kinda faded after seeing this video dropped 😅

[@savicd00]

Hi Tim, a quick question: let's say we have 20 SVG icons at the bottom of the page, each ranging from 10-20kb in size. For Google PageSpeed performance, is it better to include these icons in the DOM via SVG import app, or should I use them as image elements with lazy load, considering the number and size of the icons?

[@timothyricks]

If you don't need to style paths inside them with css, I would upload them as image elements in this case to benefit from lazy loading and a smaller DOM size. It does create more network requests to use them as images but since they're at the bottom of the page, it would be worth it to reduce the dom size by about 200kb to 400kb total.

[@savicd00]

@@timothyricks Thanks, Tim, for your response-you’re awesome! I’m a big fan of Lumos, and I have a question. This new method of separating elements using margins doesn’t quite sit right with me; it feels a bit confusing. Can I just continue using flex and separate things with the gap property? Do I need to remove anything from the code embed or make any changes?
Also, I’m planning to purchase the Workspace plan with the shared libraries feature, and I want to implement Lumos in an older project. Will I run into any issues with utility classes? In one of your videos, you mentioned that utility classes need to be at the top of the document. If I add them this way, how should I handle that? Can I use Webflow's quick 'duplicate class' option on each existing class, give the duplicate a new class name, and will this duplicated class then be positioned below the Lumos utility classes? Afterward, I would simply clean up the classes from which I made duplicates since they won’t be used anywhere. Or do you have a better suggestion?

[@matthiaspanopau]

Pure beauty! :)

[@fpv_jesus]

Ahhhh ohhhhhhh yesssss

[@radovanradovan7742]

What do you think about using lottie animations for stuff like this? Is that a good practice?

[@timothyricks]

Lotties work well for this also, but I find using CSS and HTML instead gives us more style control and creates less code on the published site.

[@radovanradovan7742]

@@timothyricks thank you

[@MrJonah9999]

Having a small issue recreating this... I have copied every step, up until you start adding the embed coding. For some reason, setting the hamburger_line heights to the custom variable hides the lines completely. I can't see any coding errors/mis-types that might be doing this. Is there a crucial step I have missed?

[@timothyricks]

Hi, the variable value for the line heights gets set in the embed. With no embed code, applying that variable to the line height just makes their height 0px

[@MrJonah9999]

@@timothyricks Thank you mate, and thank you for getting back so quickly. I think I'd bitten off more than I could chew, but copying and pasting your hamburger_embed code from your cloneable works a treat. I'll look it over to see what I might've done wrong. Hope you're well.

[@alexandergronning6405]

What browser are you working in?

[@timothyricks]

I’m using Arc Browser

[@aronleniger]

These animations are Sooo sexy

[@digiternity.official]

Hi Tim, thank you for your sharing. Can we have your email to reach out, thanks!