How to Show/Hide Nav On Scroll with Framer Motion

Using React and Framer Motion to make a dynamic nav

Making a nav show and hide on scroll looks good. In the past, I’ve created a vanilla js version inspired by what Marius Craciunoiu wrote about in this article circa 2013.

I always loved this method, as it did what I needed it to do for many-a site, but javascript has changed a lot since 2013. With advancements within React with hooks, plus with new libraries like Framer Motion. So I found myself building the very site you’re reading this on, which is a Reacjt JS Gatsby site, and wanted to find a more modern method to create this effect, which led me to a solution which I share here.

Keep reading at john.design/journal/nav-show-hide

Here is a preview of the final result