Framer Motion animation resetting when menu is opened

Question

I have a fancy heading animation using whileInView to trigger, but when I open my menu drawer, the heading animations all reset to the initial state where they are all hidden.

The heading animation function firstly splits up a string into spans containing each word then wraps each letter in a span and nudges the letters down to animate them in one at a time.

It works great, but whenever I click the hamburger, the animated headings all revert to translateY(100%) and won't reveal back even though I have set viewport={{ once: true }}.

Here is my code:

function AnimatedHeading(props) {
    const {
        text,
        stagger = 0.015,
        delay = 0.5
    } = props || {}

    // Word wrapper
    const WordWrap = (props) => {
        return <span className="whitespace-nowrap">{props.children}</span>;
    }

    // Breaking string into array of words
    const splitWords = text.split(" ");
    const words = [];
    for (const [, item] of splitWords.entries()) {
        words.push(item.split(""));
    }

    // Add a space ("\u00A0") to the end of each word
    words.map((word) => {
        return word.push("\u00A0");
    });

    const variants = {
        hidden: {
            y: '100%',
            transition: { ease: [0.455, 0.03, 0.515, 0.955], duration: 0.85 }
        },
        animate: {
            y: '0%',
            transition: { ease: [0.455, 0.03, 0.515, 0.955], duration: 0.75 }
        }
    };
    

    return (
        <AnimatePresence>
            <span className="sr-only">{text}</span>
            <motion.span
                key={`text`}
                className="inline-block"
                initial="hidden"
                whileInView='animate'
                viewport={{ once: true }}
                transition={{
                    delayChildren: delay,
                    staggerChildren: stagger
                }}
            >


                {words.map((word, n) => (
                    <WordWrap key={n}>

                        {word.flat().map((char, index) => (
                            <span key={index} className="overflow-hidden pb-1 inline-block">
                                <motion.span
                                    key={`animated-heading-${char}-${index}`}
                                    variants={variants}
                                    viewport={{ once: true }}
                                    className="relative inline-block overflow-visible"
                                >
                                    {char}
                                </motion.span>
                            </span>
                        ))}
                    </WordWrap>
                ))}
            </motion.span>
        </AnimatePresence>
    )
}

I have tried many different combinations of this, but can't seem to get this bug fixed. Any help appreciated. I'm pretty new to Framer Motion, so I'm sort of learning it as I go.