This is my first ever project in Webflow, so please bear with me.
I’m working on a hamburger menu using a lottie file (I watched a Webflow tutorial to implement this) and it seems to be working fine for the most part.
However, there’s a slight delay after clicking the menu icon, especially going from open to close.
What I want to happen:
click menu icon
menu scrolls up WHILE lottie animation goes from hamburger to “x” (open to close)
What seems to happen on second click:
menu scrolls up
after menu is hidden, lottie animation commences from hamburger to “x” (causing an undesired delay)
The reason this is happening is because between 37% and 60% the lottie animation is sitting still on the “X”… so technically when you close the menu, the animation is happening, it’s just that the movement you’re looking for doesn’t happen until the 60% frame comes “into view”… to remedy that, you make the 60% frame the “first” frame of the animation.
Hi @ShaneV! Thanks so much for taking the time to reply.
I actually know exactly what you mean, and I believe I have already made these tweaks before hand. I’ll try to explain.
So I think the issue is ‘On 2nd click’ in the Menu Button. On the second click, there seems to be that huge delay. What you suggested was actually my initial thought as well, so I did my best to optimally tweak the %'s.
The lottie animation file doesn’t begin going from close to open until around frame 109.
So, the start of the ‘hamburger menu close’ animation actually begins at right around frame 109 (screenshot below). You were impressively accurate to say to start at 60%, being that I started at 61%.
So in theory, I thought there would be almost zero delay between actually clicking that icon and seeing the animation begin at frame 109, where the close process precisely begins.
If you want to get into the nitty gritty details of this lottie file, here is the lottie file in an editor proving that the close process begins at frame 109.
So… I’m still stumped.
NOTE: If you checked the read only project link in my first post and the animation doesn’t initially work, exit out of read-only view then re-enter. The animation doesn’t seem to work initially unless you exit and re-enter read-only view.
On, the second click animation, set the percentage for the first keyframe to 37% (or wherever the animation ends)…
On the second keyframe, instead having it set to 100%, set it back to 0%… it will reverse the animation. That’s how I’ve normally configured these Lottie menu animations.
I faced this problem too. It turned out that the delay in the animation of the hamburger button when the menu was closed was due to the fact that a time delay was set at the first point of the animation. Perhaps my solution can help you