First, I think your effect is pretty cool. Second, I don’t think you should worry about that, almost everyone that uses our website will stay in the resolution they’ve opened it in the first place.
But still, if you want to do it, that’s one way you can:
First you create a css that disables the transition:
.nav-list.no-transition {
transition: none !important;
}
Then you’ll listen for resize events and cancel the transition until the user stops the resize.
var resizeTimer;
window.onresize = () => {
navigationList.classList.add('no-transition');
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => navigationList.classList.remove('no-transition'), 250);
};
It’s kind of hacky, but I couldn’t find a better way, maybe someone come up with a better solution.