Sign in

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 interface design, and yes this framing might sound a bit lofty, but stick with me. When it comes to designing interfaces it’s worth while to consider that every intention and decision in a layout of elements is a power-grabbing battle for attention. …


4 Lessons Learned Building Joy with React Native

It’s been a year since our mobile app Joy was publicly launched, and it has me getting reflective. As a product Joy has been my baby, I’ve been with it from the beginning and have been honored to help it grow into what it’s become. A lot of that journey has involved me getting hands dirty with code and using React Native to build the UI for the app. Being that I’m a designer and this was my first foray into React Native(or even React), I thought of 4 take-away’s.

1.👏Com👏pon👏ents👏

This comes as no surprise to those familiar with React…

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