Animate header on scroll with Next.js & TailwindCSS

PHOTO EMBED

Sat Feb 05 2022 10:49:57 GMT+0000 (Coordinated Universal Time)

Saved by @desiboli ##javascript ##js #next.js #react.js

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