Lag on live-version

Design help General
1

Hey guys.

I created a fullscreen menu for mobile. It works, but the animation is laggy on the live-version - why this happens?

Webflow version (vid):

Live-version (vid):

I guess it’s very easy to understand the problem.

Here is my site Read-Only: Webflow - test

What should I do to make this work? Anyone has any idea?

2

Hi there,

To improve the performance of your mobile menu animations, here are some specific optimization techniques:

The most common causes of mobile menu lag are excessive CSS transitions and transforms. Try simplifying your animations by:

  • Limiting transitions to only essential properties (like opacity and transform)
  • Reducing transition duration times
  • Using the ‘transform’ property instead of animating dimensions or positions
  • Removing any nested animations within the menu

Also check for heavy elements within your menu such as high-resolution images or embedded content. These should be optimized or removed if not essential to the menu’s functionality.

For complex animations, consider using the ‘will-change’ CSS property on the menu element to help browsers optimize the rendering performance.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.