Creating a Fading Navbar on User Scroll using React, Next.js and Gsap

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
transition: background-color 0.3s;
z-index: 1000;
}
.hidden {
transform: translateY(-100%);
visibility: hidden;
}

Welcome to our website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in erat quis enim imperdiet scelerisque. Maecenas consequat, nunc quis pellentesque varius, libero mauris condimentum metus, nec fermentum diam massa et turpis.

const { useEffect, useRef } = React;
const { gsap } = window;

function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}

function App() {
const prevScrollY = usePrevious(0);

useEffect(() => {
function handleScroll() {
const currentScrollY = window.scrollY;
if (prevScrollY {
window.removeEventListener(‘scroll’, handleScroll);
};
}, [prevScrollY]);

return (

);
}

ReactDOM.render(, document.getElementById(‘root’));

In this article, we’ll be looking at how to create a fade navbar effect on user scroll using React, Next.js, and Gsap.

First, let’s create a simple HTML structure for our website. We’ll have a navigation bar at the top of the page and some content in the main section.

“`html

Welcome to our website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in erat quis enim imperdiet scelerisque. Maecenas consequat, nunc quis pellentesque varius, libero mauris condimentum metus, nec fermentum diam massa et turpis.

“`

Next, we’ll add the necessary scripts for React, Next.js, and Gsap.

“`html

“`

Now, let’s write the React component that will handle the scroll event and update the navbar’s background color accordingly.

“`javascript

const { useEffect, useRef } = React;
const { gsap } = window;

function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}

function App() {
const prevScrollY = usePrevious(0);

useEffect(() => {
function handleScroll() {
const currentScrollY = window.scrollY;
if (prevScrollY {
window.removeEventListener(‘scroll’, handleScroll);
};
}, [prevScrollY]);

return (

);
}

ReactDOM.render(, document.getElementById(‘root’));

“`

In this component, we use the `useEffect` hook to add a scroll event listener to the window. We also use the `usePrevious` hook to keep track of the previous scroll position. When the user scrolls, we use Gsap to animate the background color of the navigation bar based on the scroll direction.

With this setup, the navigation bar will fade in and out as the user scrolls up and down the page.

In conclusion, creating a fade navbar effect on user scroll with React, Next.js, and Gsap is a simple yet effective way to enhance the user experience on your website. By adding this subtle animation, you can make your website feel more dynamic and engaging for your users.