Lottie Animation Background on Hover

When i’m not hovering over the Hamburger Animation it has a gray background that I don’t know how to remove.

The menu also stops working after a few clicks of the lottie animations.

Live Preview: https://preview.webflow.com/preview/melior-website-95b348?utm_medium=preview_link&utm_source=designer&utm_content=melior-website-95b348&preview=1bde5f5eba55361be8d1fb7350e7683c&mode=preview

Hey there!

For the gray background:

1 - Select the Menu Button
2 - Go to the Element Settings
3 - Click on “Open Menu” (The gray background should appear)
4 - Go back to the Style tab
5 - Go to Backgrounds and click on the transparency. There you should set the background transparency to 0 again, even if it says “0”

. bg-color

Then, the gray background should disappear! FYI: Here you are modifying the open state color of the menu button background.

For the menu-Lottie animation:

In this case, you need to set the Lottie interaction trigger to the Menu button, and not on the Lottie animation itself. Otherwise, if the user clicks directly in the Lottie element, it is not going to work so well…

1 - Select the menu button
2 - Create a new mouse Click interaction.
3 - Then select the Lottie element and create a new “Lottie” action.
4 - Set the start frame of your Lottie animation. Start from 0% to 100%, and then on the 2nd click, you can just go from 100% to 0%.

Hope this helps!

1 Like

This solution worked, thank you very much