const [animateHeader, setAnimateHeader] = useState(false) useEffect(() => { const listener = () => window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false) window.addEventListener('scroll', listener) return () => { window.removeEventListener('scroll', listener) } }, []) // Example usage with TailwindCSS: <div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>