Animate header on scroll with Next.js & TailwindCSS | thiscodeWorks
Mon Sep 05 2022 03:48:43 GMT+0000 (Coordinated Universal Time)
Saved by
@wumeenna
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>
content_copyCOPY
https://www.thiscodeworks.com/animate-header-on-scroll-with-next-js-and-tailwindcss-javascript-js-next-js-react-js/61fe565533c09d0015b44e84
Comments