Animation works inconsistantly

[tigorthemusichead]

Menu opens without animation sometimes. It looks like this:

menu_issue.mov

The only thing I changed in the library code is width for .bm-menu-wrap in burger-menu.css

.bm-menu-wrap {
    position: fixed;
    width: 754px!important;
    height: 100%;
    top: 0;
    transition: all 0.5s ease 0s !important;
}

@media (max-width: 754px){
    .bm-menu-wrap {
        width: 100vw!important;
    }
}

It looks like the custom width conflicts width something.
I use slide animation, but the same problem appeared for all of them.

[theoradicella]

Same problem here, but didn't change the width of anything and I realized that on my phone the animation works fine, but on my computer it doesn't @negomi

This is my code... It works fine, expect the animation, looks like @tigorthemusichead 's one

[negomi]

@tigorthemusichead For a custom width, I would recommend using the width prop: https://github.com/negomi/react-burger-menu#width

@theoradicella I think your code looks ok, are you just using the slide animation? The next thing I would check would be any custom styles/complexity in the markup structure of your app that could be interacting strangely with the menu.

[andrii-matviichuk]

For me the fix was to remove isOpen, onOpen and onClose properties
<Menu right pageWrapId={"page-wrap"} outerContainerId={"__next"} customBurgerIcon={ <Hamburger toggled={isHamburgerMenuOpen} toggle={setHamburgerMenuOpen} color="#FFFFFF" label="Show menu" size={35} /> } onStateChange={(state) => setHamburgerMenuOpen(state.isOpen)} >

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lafiosca]

I'm experiencing this same problem. I can click to open and close the drawer 10 times in a row and see different results. The closing animation always works, but the opening animation sometimes gets skipped. I'm just using the basic slide animation. I do have a custom width, which I switched from a CSS width to a prop width, but it did not fix the behavior.

[lafiosca]

I wonder if it's some kind of race condition related to the hidden="true":

Watching the elements in the inspector, I see the hidden="true" gets added after the drawer close animation completes. If I manually remove the hidden="true" in the inspector before clicking to open the drawer again, it animates correctly.

For context, I'm using Chrome on a Mac.

[Descyther]

Its the same even on the documentations example for certain animations when "right" is selected eg. scaleRotate

2022-08-26.16-44-38.mp4

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[RossDodds]

For me the fix was to remove isOpen, onOpen and onClose properties
<Menu right pageWrapId={"page-wrap"} outerContainerId={"__next"} customBurgerIcon={ <Hamburger toggled={isHamburgerMenuOpen} toggle={setHamburgerMenuOpen} color="#FFFFFF" label="Show menu" size={35} /> } onStateChange={(state) => setHamburgerMenuOpen(state.isOpen)} >

this worked for me expect I was able to keep the isOpen prop. it was just the onClose and onOpen I needed to remove