Prevent execution of animation after dynamically changing variants

[timfuhrmann]

I have a page transition that varies respective to the window's width. It works fine, but whenever isDesktop changes and the variants are being switched, the animation is being triggered, in other word a page transition on resize. Is there any way to prevent that, to exclusively trigger the animation on route/key change?

const [windowWidth, setWindowWidth] = useState<number | null>(null);

const isDesktop = !!windowWidth && windowWidth > 1024;

useLayoutEffect(() => {
    setWindowWidth(window.innerWidth);
}, []);

useEffect(() => {
    const width = window.innerWidth;

    const onResize = () => {
        if (width !== window.innerWidth) {
            setWindowWidth(window.innerWidth);
        }
    };

    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
}, []);

<AnimatePresence initial={false}>
    <StageWrapper
        key={router.asPath}
        initial="initial"
        animate="animate"
        variants={isDesktop ? wrapperVariants : mobileWrapperVariants}>
        <Stage
            key={router.asPath}
            transformTemplate={transform}
            initial="initial"
            animate="animate"
            exit="exit"
            variants={isDesktop ? stageVariants : undefined}>
            <StageFrame>
                <StageInner>{children}</StageInner>
            </StageFrame>
        </Stage>
    </StageWrapper>
</AnimatePresence>