Highlight nav bar items on page scroll using Framer Motion

Framer Motion

I am using a React TypeScript project as a reference for this article. My site is a single page app with React Smooth Scroll which makes the site anchor to the div based on the nav bar link the user clicks. If you want to read about how to implement that, go ahead and read this.

First, declare a state variable on your App.tsx to keep track of the selected component, and pass it to all child components.

In the child component, where you declared a motion div or any motion control really, you will have access to the onViewportEnter method. It depends on you, but I chose the outermost div to implement this logic because this makes the highlight change as soon as the tiniest section of the component enters the viewport. Using the prop passed in from the parent, set the selected page to the current page.

Finally, in the nav bar, highlight the list item based on the selected page. In the snippet below, I am mapping over my link array and setting the selected page link to light blue, otherwise grayish white.

Fin.

Related posts:

It is a pleasure for us to present this daily digest to you. Our aim is to give you a quick taste of eclectic stories for your reading needs. This list covers selected stories from many contributing writers. Inquiries to Dr Mehmet Yildlz https://digitalmehmet.com/contact

Investing in residential property can be a good source of income while acting as a hedge against inflation. Post covid the real estate market in Hyderabad has witnessed an increasing growth in demand…

Wearable technology is “clothing or accessories that have elements of technology in it”. It finds it’s home in fashion statements, health and fitness tracking, hearing devices, navigation tools…