Streaming live at 10am (PST)

[SOLVED] Burger animation functionality

Hi, I will need some advice. I have animation on a burger that is working as expected. I had also animation fds-nav-close on the link that is closing a burger. This animation worked until today. I’m out of the ideas about how to get it back to work. I have several backups of this project and neither works as all animations that were assigned are gone. So I have reassigned them back but it doesn’t work at all. Any Idea what happened and how to get it back to work as before? This means animate burger to the initial state when a mobile menu link is clicked?

WF Project

Can anyone help, please? Any article on this issue, I’m searching all afternoon and build new example to start from scratch but still no luck. Click on mobile nav link doesn’t close hamburger.

I have find this but these use legacy animations and it’s hard for me to find the right trigger that do exactly I need.

Even If I will find something I can use it is strange because it worked two days ago as we have talked with client about speed of animation. And today Im not able to make it work at all. :frowning:
Does someone have a simple example to share ?

Hi folks I’m really stock, can someone confirm that burger Webflow animation on custom burger button still works or is it a glitch in Webflow and I’m chasing a ghost. I really can’t figure out why it stops to work.

I have now created brand new animation BURGER OPEN and BURGER CLOSE. I have also created test button to trigger menu close and I have assign to this button animation BUTTON CLOSE (1st click). No mother I do 1st click on burger will open menu and animate burger (up to here is as expected) but when i click on this extra button, menu will close as expected but burger would not animate back. I will try to avoid WEBFLOW MENU and build one from scratch. But really, what is going on?

Hi folks, here is some update as nobody know why this happened or how to fix or if is it bug. Just silent. :frowning: I have end up with creating a custom menu from scratch I can relay on with help of javascript. Basic functionality is done and all I have to do now is to add animation for sidebar menu to slide out.

Here is JS

const burgerContainer = document.querySelector(".burger__container");
const burgerLines = document.querySelector(".burger__wrapper").children;
const mobNavLinks = document.querySelectorAll(".mob-nav-link");

// Toggle class "OPEN" - burgerButton
function toggleBurger() {
  if (!burgerContainer.classList.contains("open")) {
    burgerContainer.classList.add("open");
    toggleLines();
  } else {
    burgerContainer.classList.remove("open");
    toggleLines();
  }
}
// function to toggle class "open"
function toggleLines() {
  if (burgerContainer.classList.contains("open")) {
    for (const line of burgerLines) {
      line.classList.add("open");
    }
  } else {
    for (const line of burgerLines) {
      line.classList.remove("open");
    }
  }
}

// remove class 'OPEN' - mobile nav link
function remove() {
  burgerContainer.classList.remove("open");
  toggleLines();
}

// Event Listeners
burgerContainer.addEventListener("click", toggleBurger);

for (const mobLink of mobNavLinks) {
  mobLink.addEventListener("click", remove);
}

Here is CSS


.burger__wrapper *{
transition: all 0.2s ease-in-out;
}
.burger-line.top.open {
  transform: translate3d(0px, 11px, 0px) rotateX(0deg)rotateZ(-45deg);
}

.burger-line.mid.open {
  opacity: 0;
}

.burger-line.bottom.open{
  transform: translate3d(0px, -11px, 0px) rotateX(0deg) rotateZ(45deg);
}

Burger is now open and close on burger container click and click on mobile nav link close burger too. I will add link to example later if there will be an interest. I Hope that this basic functionality can find someone in feature, who is searching for help how to solve it, hopefully useful. :wink:

EDIT: Thank you @Tomas_Mrazek to share your skills and show me what I did wrong :wink: