Silky Smooth Menu Animation in React
One of the principals of material design is Expressing Continuity, which teaches us that the motion is not just a fancy feature we add to our app or whimsical touch to the look and feel of the app. It’s rather a primary mean to guide user regarding how to do specific actions, what would happen if t continued that action, where items are going, from where they were originated, and ultimately convey crucial messages to the user. These messages can be: don’t worry the app is not broken or frozen, it’s working and we’re loading the data (placeholders), or how many characters are left in a way that human understand better or makes sense more that the raw number.
It guides user attention in a smooth, unbroken fashion. When UI changes motion provides continuity between the placement and appearance of elements before and after the transition.
One of the primary parts of any web app is the menu/header/navigation (whatever your project manager/designer loves to call it), and introducing this important concept to it would add a lot of value to the web site.
The Goal ⚽️
The goal is to have the children elements of the navigation transition to each other seamlessly. The navigation has three parts: the arrow, the panel (container), the items.
Usually it’s pretty complex and very hard to get it right with imperative code that manipulates the DOM directly, and you have to keep track of the events: mouseOver, mouseLeave, focus, blur, etc, the state of variables, and always sync them with the DOM which is quite challenging and error prone.
React to the rescue
Luckily with React you can do this in a declarative way and leave the heavy lifting of syncing the DOM with the state to it, as it knows how to manage it the best in the most performant way.
Prerequisites:
Verify Node Installation
Install Create-react-app CLI
It’s a convenient tool to create a react app with no dev or build configurations required whatsoever with a bunch of very handy stuff like ESLint, Hot Module Reloading, Jest, etc.
Create Our Project
Start the Project
Starting from create-react-app v2, importing sass files is supported out of the box without the need to add a parallel process or eject to achieve that. Just have to install node-sass to be complied.
Entry Point
Iterate through the navigation list and, add the active index to the state and add remove it based on hovering.
Nav HTML
Just simple html with attributes for marking current and previous for animation, both leaving and coming in.
Style the Navigation
Simple styling for the navigation with basic layout. In addition to animations for leaving and coming in to the previous and current navigations items.
“FLIP” it
“FLIP” is an advanced animation technique that can be used to animate the positions and dimensions of any DOM element in a performant manner, regardless of how their layout is calculated or rendered (e.g., height, width, floats, absolute positioning, transform, flexbox, grid, etc.) with no jankiness
Steps:
1. First
In our case is the previous navigation item. We calculate it’s position, width, and height.
2. Last
Calculate the position, width, and height of the current navigation item.
3. Inverse
Calculate the delta and inverse the container to the previous state
4. Play
Let it transform back to the original state, which is the normal layout
Let’s see it with 1 second delay ⏱
See It in Action 👀
