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:

NodeJs Editor of choice (Ahem, Sublime)

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 👀

Full Solution 😍