Delay in hamburger menu lottie animation

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)

Here is my project:

https://preview.webflow.com/preview/cesanastudio?utm_medium=preview_link&utm_source=designer&utm_content=cesanastudio&preview=5a8ed55cb81fc37dc0963d57d6461afc&mode=preview

To test, please go to tablet view and click hamburger menu.

Any suggestions how to get the menu scrolling up at the same time of the lottie animation on click?

Hey @papa!

I think you need to mess with the percentage/frame on the Lottie close animation.

Screen Shot 2020-01-06 at 3.43.58 PM

Try setting your percentage to 60% on the first element in the close animation. The second step should be at 100%.

Let me know if this works!

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.

Try this:

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.

Let me know @papa!

I tried it, and it seems to look and behave the same.

There is just a slight delay on the second click still, where the menu scrolls up, then the animation starts.

Oh well, perhaps this is something I just have to live with. Please let me know if you have any other ideas.

Thanks so much @ShaneV!

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

1 Like