How to animate an item when it appears :hidden

Question

I want to animate navbar when the page is reduced to a given break point, it is necessary that at max-w-[650px] all elements of navbar are hidden and after that tabs appear (i.e. the logo disappears and tabs are moved to the center)

I did it this way, but I don’t think it’s a rational solution:

const NavBar: React.FC = () => {
    const path = usePathname();
    const ref = useRef(0);

    const [isMobile, setIsMobile] = useState(false);

    useEffect(() => {
        const handleResize = () => {
            setIsMobile(window.innerWidth <= 650);
        };

        handleResize();

        window.addEventListener("resize", handleResize);

        return () => {
            window.removeEventListener("resize", handleResize);
        };
    }, []);
return (
        <main>
            <div className="flex bg-[--bg-main_dark] w-full h-20 rounded-3xl px-4">
                <motion.div
                    key={isMobile ? "mobile" : "desktop"}
                    initial={{ scale: 1, opacity: 1 }}
                    animate={{
                        opacity: [0, 1],
                    }}
                    transition={{
                        type: "spring",
                    }}
                    className={`flex items-center ${
                        isMobile ? "justify-center" : "justify-between"
                    } w-full`}
                >
                    <div
                        className={`flex items-center ${
                            isMobile ? "hidden" : ""
                        }`}
                    >
                        
                        {logo}
                    </div>
                    <div className="flex">
                        {tabs.map(({ href, icon, label }) => (
                            <Tab
                                key={href}
                                href={href}
                                icon={icon}
                                label={label}
                            />
                        ))}
                    </div>
                </motion.div>
           </div>
        </main>
    );
};

This method also has a problem in that when you open the page, the animation is played, but it is necessary that only when you minimize the page.