I'm trying to make it so that a border transitions on to the page smoothly once I reach a y point but I am having trouble with the transition animation. I'm using react and tailwind.

This is the code I have so far.

const Navbar = () => {
  const [navStyles, setNavStyles] = useState(false);

  useEffect(() => {
    const handleNavStyles = () => {
      if (window.scrollY > 80) {
        setNavStyles(true);
      } else {
        setNavStyles(false);
      }
    };
    window.addEventListener('scroll', handleNavStyles);
  }, []);

  
  return (
    

      
    
  );
};