For those who wants to achieve this to work fully on mobile, use "Navbar" instead of "menu-button "on animation and choose element trigger "Navbar opens" then choose your lottie
@alldatruckus2 жыл бұрын
God bless you man I seriously had issues with this.. Your solution worked perfectly !!!
@kragsprong2 жыл бұрын
Thank you!
@yoannetra53722 жыл бұрын
For those having problems with blurry and pixelated lottie, the solution I found is to not scale it but instead use the width property and overflow hidden div "menu-button". You can also try to resize the lottie file in Lottie Editor and download it to preserve the quality.
@rubenccnv2 жыл бұрын
You are such a legend for this
@justynasieczka9132 Жыл бұрын
Thank you so much for this!!!!
@salmonj77 Жыл бұрын
Or you could just use em instead of px. It retains the quality and scales it nicely... try 2em as a starter and adjust from there
@soundhouse7tonstudio4 жыл бұрын
Yes, if I click on a menu link button the x will stay while the menu itself is closed then. can you please show us how to solve the problem? Maybe is it possible to click on two buttons at once? Click on a menu link button clicks also the animated Nav toggle element? That would be an easy way when it is possible.
@soundhouse7tonstudio3 жыл бұрын
@Andy Luong no sorry
@aloha27134 жыл бұрын
There are some parts missing in the end of your video. If I click on a menue link the x is still there?
@danielsissa4 жыл бұрын
that's true
@ipekmoosheimer6564 жыл бұрын
yes im having the same issue
@ayushisharma41554 жыл бұрын
I got the same error. In the beginning, you will have to apply the same interaction on the Navbar (with a house icon) and not on the Menu Button. Keeping the rest of the steps as it is explained in the video afterward. Then it will work.
@vladimircvejanov99704 жыл бұрын
@@ayushisharma4155 Thank you for the info! Very helpful! :D
@kawaiikaikun4 жыл бұрын
Once you link another page it will not matter because it would just load the next page you have linked
@masudkarim1122 жыл бұрын
Thank you so much for your tutorial
@dankort3 жыл бұрын
I follow it exactly as you say, but when I second click the animation doesn't change. Furthermore, the icon is pixelated when using safari. Any idea what I'm doing wrong?
@trtle.t8 ай бұрын
Is it required that you use a Lottie file? Can I use a GIF instead, or does it not work the same?
@johnleighdesigns5 жыл бұрын
nice ! plus that bonus tip of dealing with files that have extra spacing around or too many blank keyframes!
@pixelgeek5 жыл бұрын
Happy to help 😁🙇🏽♂️
@Zeddings3 жыл бұрын
I had an issue that when I published, the lottie became very pixelated and blurry. Is this because of the way we scaled it? Other than that, great tutorial and easy to follow!
@cubemusicworld3 жыл бұрын
Same problem How did you fix it
@eric-rounds3 жыл бұрын
I did it! (I'm new to Webflow) and your example really helped. I had a Lottie file that looped and I needed to make it playback on click and then the second click like in your example. Thank you! Even now in 2021, the interface is fairly identical.
@akashchoudhary57363 жыл бұрын
Why my menu button disappears as soon as the menu is opened !? This is so frustrating , can anyone help me with this ?
@AZ-hg4rn3 жыл бұрын
Thanks for the video! I just have a follow up question. The icon loads everytime the page loads. Goes to x and back. How can I stop that?
@IhorRomankov Жыл бұрын
Everything is cool, but the topic is not fully covered. When you drag a link in the menu or under the menu, the icon does not respond and remains a cross. What should I do in this case?
@najishaban55182 жыл бұрын
How do I reverse direction of a global navbar menu items when in hamburger mode without flipping it on a full page mode? This is needed for Right to left languages.
@charlene71323 жыл бұрын
Hi, thank you very much for this great tutorial. It worked totaly fine, but i noticed that the scaled lottiefile wors fine in chrome anf ff but is blurred in safari browser. Is there any way to fix that? Thx in advance
@valeirsKi3 жыл бұрын
Hey, i have a sidebar menu and i would like the hamburger icon to move to the right 300px together with the menu. When i try to add the animation to the timed animation the whole hamburger disapears. Any idea?
@kareemabulaban94564 жыл бұрын
is there anyway to change colors of lottie on hover for example?
@creativereflux43365 жыл бұрын
Thanks for being generous in delivering good stuff. Salamat!
@pixelgeek5 жыл бұрын
Walang anuman. thanks for watching :)
@busimo5 жыл бұрын
You're killin it half-asian lawyer bro! Awesome!
@pixelgeek5 жыл бұрын
thanks for watching! Also, I'm not half-asian. I'm full Filipino :D
@busimo5 жыл бұрын
@@pixelgeek was referencing to Steven Crowder's lawyer, as a joke. You are awesome!
@willlozza67533 жыл бұрын
what's the best way to invert the lottie animation colours so when the background changes, the lottie animation changes so it looks good (black to white etc)
@bikeng105 жыл бұрын
I did this animation and was wondering when you click on any part of the screen to close the menu, the icon remains as the "X". How do you trigger the menu animation to go back to the initial state when not using the icon to close the navigation.
@bikeng105 жыл бұрын
The solution to having the lottie icon change back to the initial state when closing the menu by clicking on the screen is to place the animation trigger on the dropdown instead of the lottie icon.
@0ptim4 жыл бұрын
@@bikeng10 Hey Lester I just wanted to let you know that there is a much cleaner and better solution to this. Just use the triggers 'navbar opens' and 'navbar closes' to start the according animations. This way you can be sure that the animation is always in the correct state.
@saiharsha62074 жыл бұрын
@@0ptim Thank you so much! I had the same issue. And followed your suggestion. It works perfectly. I found this while searching as well kzbin.info/www/bejne/lWbJe55njt2Imdk. Hope it helps someone who doesn't know where to select 'navbar opens' and 'navbar closes'.
@nicolesalmond73863 жыл бұрын
@@saiharsha6207 thanks so much for that link! you're a lifesaver!
@nikitamanchenko75074 жыл бұрын
And what will be if I will pres on some of menu links, not in a menu button?
@nicolasmarquez59565 жыл бұрын
Sizing it was a great idea, because a lot of lottie files are like that one! thx!
@pixelgeek5 жыл бұрын
glad to help teach you that trick. :) Thanks for watching.
@zeeshanmh2154 жыл бұрын
Thanks a bunch, Nelson! Being coming from a design background, i love your super cool explaination
@pixelgeek4 жыл бұрын
my pleasure. thanks for watching 😁🙇🏽♂️
@orjval4 жыл бұрын
Hi, I just want to ask if there is a way to turn a lottie I made into a button? I already imported that on Webflow, I just don't know how to link that to another page. Thank You!
@stephenasonye5 жыл бұрын
Hey Pixel Geek, thanks for the video! I did exactly this but for some reason on mobile my menu icon is blurred. Any way to fix this?
@pixelgeek4 жыл бұрын
Hmmm... Can you post your read only link?
@stephenasonye4 жыл бұрын
@@pixelgeek preview.webflow.com/preview/stephenasonye?preview=9584bd9961eb39233a8c446ba99cc72e&mode=preview It shows that it's clear on the designer view but when I open the URL on my phone it's blurry. Also, the Lottie file still automatically plays even though I followed the interaction steps exactly how you did it.
@PS-so5zc4 жыл бұрын
@@stephenasonye same problem on my project too.. how can I fix it?
@James-vt1vn4 жыл бұрын
@@PS-so5zc Same with me, but only in Safari. Any solution to this, Nelson?
@DigitalFilemp43 жыл бұрын
did anyone solve this yet? :/
@sassisammi4 жыл бұрын
Agreed - works PERFECTLY!!! Thanks Nelson @pixelgeek, however looks awesome on my desktop mac but super blurry/pixelated on iphone - (due to the scaling I'm guessing). Any fix for this?
@pixelgeek4 жыл бұрын
i notice this only happens on Safari and iOS Safari. I'll make a follow up video to this soon.
@sassisammi4 жыл бұрын
@@pixelgeek Thanks Nelson! Appreciate your ongoing support. Enjoy your weekend...
@ssussufan4 жыл бұрын
@@pixelgeek Hi Nelson, have you made the follow up video yet? I am having the same problem :(
@jadeg014 жыл бұрын
@@pixelgeek any luck finding the answer to this - it was all making sense until mine was all blurry... then I read these comments so I know it wasn't just me
@JeffErnst43 жыл бұрын
@@pixelgeek Have you made a follow up video for this issue? Loved this video, but it's a bit blurry on my end.
@Faint525 жыл бұрын
Hey bud, thanks again for the glorious insight! A note- you speak to close to your mic, so all the asmr sounds are super loud and for me, it’s a little distracting. I would suggest lowering the sensitivity of your mic and talk maybe a bit further? Much love
@pixelgeek5 жыл бұрын
Thanks for the feedback. I'll make a note of this
@MAli-gd8zu4 жыл бұрын
Mr.Nelson really i love your face don't know why i think because of your slogan {Make Web Beautiful Together} . Sir doing great and yeah good to know about your family.
@artemmuta37325 жыл бұрын
It’s not very convenient that there is no way to change the styles in the slider for slide nav, will this function be implemented in the future?
@pixelgeek5 жыл бұрын
That's true. Can you give me style examples of what you want to change the dots to? I'll make a video for this.
@originunknown42733 жыл бұрын
This was very helpful. Thanks
@pixelgeek3 жыл бұрын
Glad it was helpful!
@abidhajher70763 жыл бұрын
What about if the user doesn't click the hamburger to close, and instead clicks on somewhere else on the page?
@daisychavez13133 жыл бұрын
there's a comment above that takes care of this- use the navbar opens and closes as the element trigger and follow the rest of the steps in this video the same way.
@stusmith1201 Жыл бұрын
Can you update this Tut for 2023? Webflow UI has changed
@nathandillon55054 жыл бұрын
Thanks man, a lot simpler than I thought it would be. Good vid!
@kragsprong2 жыл бұрын
Thanks for this!
@rogerridpath11075 жыл бұрын
Another great one!
@GunKaraka4 жыл бұрын
Thanks mate, that was awesome
@pixelgeek4 жыл бұрын
Glad you enjoyed it
@user-sp4fb3lb2b4 жыл бұрын
Worked perfect thank you
@pixelgeek4 жыл бұрын
Glad to have helped 😁
@LottieFiles4 жыл бұрын
Nice!
@pixelgeek4 жыл бұрын
Thank you! Cheers!
@geisleris5 жыл бұрын
Awesome tutorials, keep going!!!!
@pixelgeek5 жыл бұрын
Thanks! :)
@studybeats77842 жыл бұрын
Thank you, very helpful content!
@darshitpatel55133 жыл бұрын
Thank you Brother for this. Have a nice day.
@pixelgeek3 жыл бұрын
Have a nice day
@akbarbadsha254 жыл бұрын
thanks man.. awesome tips
@pixelgeek4 жыл бұрын
Happy to help!
@timth013 жыл бұрын
First, love your videos, they are super helpful, thank you so much for doing them. On this specific one I have the same question as Abid Hajher: How do you handle the case where someone clicks somewhere else on the screen to close the mobile menu, instead of clicking on the icon again? How do you fire the close-lottie interaction so that you have the hamburger lottie in the correct state? Not being able to handle this case is a deal breaker for using lotties as hamburger icons, unfortunately. :-( Seems like you would have the same issue with a standard close/open icon as well.
@designgood53413 жыл бұрын
@Denny Satria see pinned comment above!
@selmanfit4 жыл бұрын
Genius!! thx a lot!!
@sykowhite94653 жыл бұрын
doesnt work.... still have white space overflowing
@mRWiil4 жыл бұрын
thank you for shared with us! :) i'm newbie
@musaffahtwelve9 ай бұрын
Lot OF thanks
@AmanSharma-dt7fh4 жыл бұрын
Thanks, You helped me :)
@pixelgeek4 жыл бұрын
Glad to hear that!
@charlesm11733 жыл бұрын
Thank you very much, it's working perfectly :)
@lilimxprice4 жыл бұрын
Thank you :)
@pixelgeek4 жыл бұрын
My pleasure 😁🙇🏽♂️
@lilimxprice4 жыл бұрын
@@pixelgeek Been following loads of your videos lately, as I'm building my first Webflow website and just wanted to say thanks for all the valuable videos, really couldn't have got started in a load of the sections without you :)
@immagina2394 жыл бұрын
Thank you!
@marvin..m5 жыл бұрын
Thanks for the tutorial. It would be very helpful to know how to change the color of the hamburger to a custom color. There seem to be options on changing the background color but not the object itself. Can this be accomplished by adding custom code? A tutorial would be greatly appreciated.
@fawesum5 жыл бұрын
Just change the background color like you would any other item on the page.
@marvin..m5 жыл бұрын
Thanks for responding. I don’t want to change the background color. I just want to change the hamburger color.
@fawesum5 жыл бұрын
Marvin Mattelson oops, my bad. You can change the burger itself over at the website he downloaded it from. There's an editor button there after clicking the lottie you want.
@pixelgeek5 жыл бұрын
yup, @Fawesum is right. If you can't find the button, it's over here: share.getcloudapp.com/v1um1J4j hope this helps :)
@LottieFiles4 жыл бұрын
You can change the color of any Lottie animation using our Lottie Editor --> lottiefiles.com/editor