Principal Designer at GoDaddy. Formerly Design Director at Happy Money. Multidisciplinary designer, artist, developer, and craft coffee enthusiast.

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

How ordering information hierarchy can make or break an interface experience

The Hierarchical Powers That Be

When I think of hierarchy, a power struggle comes to mind. Something straight out of a medieval times throne-grabbing Game of Thrones-esque story. Every pawn and piece is at play competing for a chance at the top of the stack, at all costs.

Sure, I’m talking in reference to user…

John Choura

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