I am using a template that I have modified quite a bit for my site, and I feel that the animations (especially the hamburger menu) is quite slow. I tried to simply decrease the animation time from 1.3 secs to 0.7 secs but then the animation didn’t work anymore.
Is there a way to make it faster without the whole thing breaking down?
Here is my public share link: Webflow - Julian Being Relationship and Sexual Well-Being Blog For Men
Hi there,
Here are several ways to improve your animation performance in Webflow:
First, clean up your unused triggers and animations through the Interactions panel. Open the Interactions panel, review all your animations, and remove any that aren’t being used in your final design.
For smoother animations, fine-tune your transitions by adjusting the duration and easing settings. Access these in the Transitions settings panel where you can optimize the timing and movement style of each animation.
For more complex animations, consider implementing GSAP (GreenSock Animation Platform). Webflow’s native integration with GSAP allows you to create highly performant animations directly on the visual canvas. You can find detailed guidance on using GSAP in Webflow through our documentation: Webflow Interactions with GSAP.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hey @fredj32 ,
I tried setting the duration of the Menu lottie element to 0.7 and even 0.5 seconds and it seems to work as you would expect it to for both open and close menu interactions.
You can set the desired duration in the settings of the ‘Close mobile menu’ interaction:
And while you may not be able to see it in action by clicking the play icon there (in close mobile menu interaction), you should be able to see how it behaves in the preview mode. And it does work on my end.
Let me know if you are still facing issues on that front.
When I change the duration to 0,7 secs, then it gets stuck like on the picture when I try to close it by tapping on the overlay (just implemented this based on your tips) it happens more frequently.
I’ve changed the animation speed only on the menu lottie and also on all three elements to see if it makes a difference. It also doesn’t work on the webflow.io domain, there it doesn’t even open the menu.
Do you have any idea what is causing this?
Edit: I’ve put the time back to 1,3 secs and now it doesn’t work on the webflow.io preview domain. So I am a bit afraid to update the page on the live version now. 
You can check it here.
Thank you for your time and effort!
Hey @fredj32 ,
The issue of the icon being stuck is not because of the speed of the animation, I have shared the setting that’s causing the issue in this thread.
You can make the necessary changes and test it out. You can change the speed as per your requirement and the menu icon should not be stuck.
That being said, I noticed that when we click on overlay to close the menu, there is a mismatch of click interaction thus reversing the menu icon shown during opening and closing of menu, so as an alternative I would suggest instead of linking the ‘Close mobile menu’ interaction, you could setup a simple code to mirror the click events such that when the overlay is clicked, a simulation of click is done on the menu icon.
To approach this in a cleaner way, check the Finsweet’s mirror click events and you can set the custom attribute shared there with the trigger value to the Mobile navigation shade element and have the custom attribute with the target value for the Menu Button respectively.
This should take care of closing the menu if a user clicks on the overlay element and also making sure that the menu icon behaves properly for such use-case and you can set the speed of the icon interaction as per your requirements without any issues.
Hope this helps.
Ahh that makes sense now, I was starting to think it was just Webflow being weird again. I’ll try the mirror click setup with Finsweet, thanks for pointing that out.
Thank you once again!
I’ve implemented like you and the finsweet resource explained.
So I added the code to the head tag of the project and applied the required attributes accordingly (mobile navigation shade = trigger, menu button = target).
There is no bug with the icon anymore, so that’s great. However, pressing on the mobile navigation shadenow just reopens the menu and I think it’s because it doesn’t recognize the state of the button. So it mirrors the click on the unclicked menu button. Do you have any idea how I can specify that I want it to mirror the unclicked button?
Sorry that this is such a hassle, and I appreciate your input a lot!
Hey @fredj32 ,
Welcome.
As a workaround, I would suggest to remove the open mobile menu and close mobile menu interaction from the Menu Button element and instead add it to the Navbar element.
When you add an interaction on the ‘Navbar’, you will get an option to select the trigger as ‘Navbar opens’. You can set that as the trigger instead of ‘Mouse click’ and link open mobile menu interaction to ‘Menu opens’ and link close mobile menu interaction to the ‘Menu closes’ event.
With this approach, my guess is you can remove the Finsweet attributes and script and it should still work. You can test it out to see if it works for your use-case. When I applied those changes in the preview site, it worked like you would expect it to while maintaining the icon open and close status.
Hope this helps.
Absolutely amazing. It now works as intended. I cannot thank you enough. Without your help I wouldn’t have been able to do it.
I am so glad that people like you exist. Thank you and please be kind to yourself!
