Animations applied to all breakpoints still resetting when viewport resizes

I believe the expected functionality is that interactions that are applied only at certain breakpoints reset when a breakpoint is reached, but are preserved for interactions applied across all breakpoints. However my preloader and my navigation menu animations are still resetting. I looked around at some YouTube tutorials and site clones and it seems like it isn’t isolated to my site, so I’ve basically accepted this is the built-in functionality, intentional or not, so I’m trying to work around it.

The biggest issue it poses is with the navigation menu. I first used Webflow’s native nav menu, even though it required overwriting quite a bit of styling. The trigger for the menu is a Lottie that animates from a hamburger to an “x,” and then the links animate in from an initial state of being positioned below the bounds of a div with overflow: hidden. This was using the “nav opens/nav hides” interaction. On first click/tap, the body’s overflow is set to hidden to prevent scrolling behind the full-cover menu, then on second click/tap the overflow is set to auto. Because the interactions reset at each breakpoint, if the menu is open when the viewport is resized to a breakpoint (including changing the orientation of a phone), the menu stays open (ideal) but the Lottie and links reset to their initial positions, meaning the Lottie returns to the hamburger state and the links are hidden.

I decided to create my own menu, rather than use Webflow’s native one, and animate the nav sliding in and out manually with a mouse click interaction. That way, it resets along with the other interactions so that the menu closes when a breakpoint is reached. This is not ideal, but at least then the menu is never left without visible links. However, this means that the change in the body’s overflow style is not triggered. ie, the menu closes automatically but because there is no click, the body’s overflow is still set to hidden.

(eta: Forgot to mention that I am using a smooth-scroll library called lenis on desktop, so the body actually still scrolls when overflow is set to hidden. The nav menu is given a special attribute to disable lenis when it’s open, allowing overflow: hidden on the body to function. So, when the menu auto-closes on desktop the body is able to scroll, but its overflow is still set to hidden and all the above described issues are still relevant.)

I’m not sure what the best option is here other than to return to Webflow’s native menu and not utilize any interactions on its contents.

Thanks in advance for any advice/help!


Here is my public share link: LINK
And here is the live site (changes to body overflow are custom code so it won’t work in the preview): LINK

I had exact the same problem. Until I read this thread about it. Apparently as long as you have one animation on any element on the page that has one of the breakpoint trigger unchecked, the animations will reset when reaching breakpoints. You have to make sure all breakpoints trigger are checked on all animations on this page, which defeat it’s purpose of using it. This seems to be a limitation of WF and still not resolved since that post of 2021. You might be able to go around this by writing your own JS triggers and animations for the menu