Custom Burger animation cloneable for the community :)

Community resources Show & Tell
21

Thank you @RoseWebStudio and no problem it was fun to do

1 Like
22

Yay great seems like everybody is waiting this ! Can’t wait to build my own interaction library !

1 Like
23

Great work - thanx for sharing!

1 Like
24

Great… merci beaucoup

1 Like
25

No problem @stef :slight_smile: it’s a pleasure !

26

@NAV Ahah aucun soucis

27

Great work, thanks for donating. Inspired me to do the same!

1 Like
28

Thanks you @chiefmonkey ! No problem, yes build some too !!

29

Hey there! these are really cool. Kudos for sharing…
Can I ask if we need to make the lines thinner when scaling down to mobile devices, it appears to be break the interaction. i.e. the ‘X’ does not cross/work properly. Can you recommend which area of the interaction should be re-altered to adapt with thinner lines?

  • the burger height & weight have been reduced to 50px each
  • each line height has been reduced to 10px each
  • line 2 padding reduced to 20px
  • line 3 padding reduced to 40px
30

Hey @Bammedia,

Thanks a lot :slight_smile:

Right now, everything is set in %, so i guess it should work.

What i recommend :

If you want to make it smaller, divide by the same number.
Example :

Right now the parent div is 100px X 75px (not square).
If you want it 50px i would do 50px X 37.5px
Since you divide by 2, do the same thing for the padding, line height etc.
That way it should work properly.
Do not hesitate to pm me if you are having trouble fixing it

31

Thanks for sharing these. Quick question for everyone. What is the best/easiest way to get one of these into a project without rebuilding it?

32

@NewInBoston, Right now the only way is to rebuild… BUT the copy/paste through different projets should come this year, it has been announce by Webflow team as a very soon feature !

33

That’s what I had figured based on another shared project I had used parts of for inspiration. How long did it take you to master the animation? Being off by even 1 degree vs px can distort the entire thing.

34

These are dope!

HUGE props to you @zbrah!

1 Like
35

@NewInBoston, an entire day i would say.
It’s not that complicated, i lost like 2hours on the first to figure out the best way the center everything in the most efficient way and of course compatible with all browsers.

After that, basically declined this process for the others and shared time between inspiration and build.

I haven’t seen any burger for the inspiration to keep clean my creativity.

That one is the one i’m most proud of i don’t think it exist somewhere else :smiley:

1 Like
36

Thank you @anonmusic :muscle:

37

That orange one is my fav! Haven’t seen it anywhere at all.

1 Like