How can i get smooth framer motion animations on my navbar?

Question

Im trying to learn framer motion I'm slowing trying to incorporate animations to my website however i have been struggling with this effect. I essentially want to have a fixed position navbar appear once I scroll past the 'hero' section of my website. If im on the hero then ill just the regular navbar similar to this navbar effect on stripes ssession website. As you can see once you scroll past the main title page a floating navbar appears.

The issue I'm having is that currently my animation is not smooth of very 'responsive'.

1. The navbar just suddenly appears / disappears (no intro / outro animation)
2. There's significant lag, if I scroll too quickly the navbar appears halfway through my next section, or remains if i scroll to quickly back up to my hero section. (I understand there will be some delay but it feels very off)

Im not sure whats going wrong - any help would be greatly appreciated !

Here is my hero section:

'use client';

import { useInView, motion, AnimatePresence, useAnimationControls } from 'framer-motion';
import { useEffect, useRef } from 'react';
import FloatingNavbar from './FloatingNavbar';

const myVariants = {
    hidden: { y: 75, opacity: 0 },
    visible: { y: 0, opacity: 1 },
};

function Hero() {
    const ref = useRef<HTMLElement>(null);
    const inView = useInView(ref);
    const controls = useAnimationControls();

    useEffect(() => {
        if (inView) {
            controls.start('hidden');
        } else {
            controls.start('visible');
        }
    }, [inView]);

    return (
        <>
            <AnimatePresence>
                <motion.div
                    variants={myVariants}
                    initial="hidden"
                    exit="hidden"
                    animate={controls}
                    transition={{ duration: 0.5, ease: 'easeInOut', type: 'spring' }}
                >
                    <FloatingNavbar />
                </motion.div>
            </AnimatePresence>

            <section
                id="home"
                ref={ref}
                className="flex min-h-screen w-full flex-col items-center justify-center px-8 pt-16 md:flex-row md:justify-between md:px-16"
            >
                <div className="mb-8 max-w-lg text-center md:mb-0 md:text-left">
                    <h1 className="mb-4 text-4xl font-bold">Welcome to My Website</h1>
                    <p className="text-lg">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget
                        ultricies lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet nisl.
                    </p>
                </div>
                <div className="h-64 w-full md:w-1/2">
                    {/* Replace this div with your actual image */}
                    <div className="h-full w-full bg-gray-300"></div>
                </div>
            </section>
        </>
    );
}

export default Hero;

and heres my navbar:

import React from 'react';
import ContactUsButton from '../ContactUsButton';

const navLinks = [
    { href: '#protocol', label: 'PROTOCOL' },
    { href: '#milestone', label: 'MILESTONES' },
    { href: '#contact', label: 'ABOUT US' },
];

const FloatingNavbar = () => {
    return (
        <header className="fixed left-1/2 top-0 flex min-w-[62rem] -translate-x-1/2 transform items-center justify-center">
            <nav className="glassy container relative mx-10 mt-6 flex items-center justify-between rounded-sm">
                <ul className="flex items-center p-2">
                    {navLinks.map(({ href, label }) => (
                        <li className="px-4" key={href}>
                            <a key={href} href={href} className="block rounded font-medium text-black ">
                                {label}
                            </a>
                        </li>
                    ))}
                </ul>
                <div className="pr-4">
                    <ContactUsButton />
                </div>
            </nav>
        </header>
    );
};

export default FloatingNavbar;