Geek Culture
Published in

Geek Culture

Animate a Glassmorphic Header on Scroll using Next.JS 12 and Tailwind CSS

In this tutorial, I am going to show you how you can do the same. Let’s jump right into it.



Creating a Next app with TailwindCSS

I am going to use tailwind for the basic stylings needed in the app

npx create-next-app next-tailwind-header-animation -e with-tailwindcss

Creating the index page content

I am creating a very stylish card with tailwind

So let’s replace the index.js by the content below


run the command below to lanch server

npm run dev

Here the preview of the page 😍😍

Themeptation — Header animation — index.js

Creating the Header

Create a new file Header.js in the components folder.


I’m creating an Array that contain the menu sections (easy 😉)

Now let’s Add the Header inside the index.js


let’s jump to http://localhost:3000

Themeptation — Header animation — index.js

It’s looks amazing ✌️

Adding Magical code to allow header be animated on scroll

Create a state to hold if we need to change the background or not.

const [animateHeader, setAnimateHeader] = useState(false);

Setting the state based on scroll-

useEffect(() => {
const listener = () => {
if (window.scrollY > 140) {
} else setAnimateHeader(false);
window.addEventListener("scroll", listener);
return () => {
window.removeEventListener("scroll", listener);
}, []);

You might need to change the value for scrollY based on your app needs.

Here the final Header.js

import { useState, useEffect } from “react”;
import Link from “next/link”;
export default function Header() {
const [animateHeader, setAnimateHeader] = useState(false);
useEffect(() => {
const listener = () => {
if (window.scrollY > 140) {
} else setAnimateHeader(false);
window.addEventListener(“scroll”, listener);
return () => {
window.removeEventListener(“scroll”, listener);
}, []);
const menuItems = [
{ title: “Home”, url: “" },
{ title: “Products”, url: “" },
{ title: “Contact”, url: “" }
return (
className={`w-full backdrop-filter backdrop-blur-lg bg-white/50 fixed z-10 trasition ease-in-out duration-500 ${
animateHeader && "shadow-xl"
<div className="max-w-7xl mx-auto ">
className={`flex max-w-screen-xl py-10 ${
animateHeader && "py-5"
} mx-auto items-center justify-between px-8 trasition ease-in-out duration-500`}
className="text-xl font-bold tracking-tighter text-indigo-400 pr-8"
<ul className="flex items-center justify-start">
{menuItems?.map((item) => (
<li key={item?.title}>
<Link href={item?.url}>
<a className="px-2 lg:px-6 py-6 text-md border-b-2 border-transparent hover:border-indigo-400 leading-[22px] md:px-3 text-gray-400 hover:text-indigo-500">

Here the final code of the tutorial

Chime in and leave your thoughts and suggestions in the comments below.

A new tech publication by Start it up (

Recommended from Medium

Create custom Observables by wrapping existing APIs in Angular 7

RxSwift: Time-Based Operators

Frontend Weekly Digest #185 (16–22 November 2020)

Build a Solid and Secure Login Workflow in Next.js with Strapi

Core Concepts of React

Comparing bundlers: Webpack, Rollup & Parcel

Multiple language support in Lambdas using layers.

Implementing locks in NodeJS applications

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


FullStack Developer :)

More from Medium

Setting up NextAuth.js application and deploying it via Vercel

MUI5: NextJS + MUI5 + SCSS Modules Boilerplate

Quick Start of PWA with Next.js

How to create a multiplayer online form with Next.js and Liveblocks