Oliver Joseph Ash

Full-stack web developer

Morph animation between positions using FLIP

In my work at the Guardian we have been thinking about how to improve the design of the site header and navigation. One of the ideas we had was for the site navigation button to morph into a fullscreen modal containing the site navigation upon user interaction. This visual continuity, inspired by Material Design, helps to guide the user’s attention.

How could this animation be achieved using the web platform?

When collapsed, the navigation button should be part of the document flow, and upon user interaction, it should expand to a fixed element which covers the screen. Significantly, I wanted the animation to be buttery smooth and play at 60fps, so I could only animate CSS properties which supported hardware acceleration.

Here is the final result:

(Alternatively view at https://www.youtube.com/watch?v=cUYbPFTnFLY.)

The answer was to use Paul Lewis’ First Last Invert Play (FLIP) technique. When the user clicks the button:

  • First: calculate the current position of the button in its collapsed state using Element.getBoundingClientRect.

  • Last: apply the expanded state (fixed) and calculate the new position using Element.getBoundingClientRect. This triggers a forced synchronous layout, but we have 100ms to respond (see Response Animate Idle Load (RAIL)), so that’s fine.

  • Invert: use CSS transforms to mimic the collapsed state. This can be calculated using our first and last positions.

  • Play: enable CSS transitions and undo the inverted styles. The browser will then play out the animation smoothly at 60fps.

We can use the same technique to collapse the button when it’s in its expanded state.

You can try it out for yourself. Here is the code: http://jsbin.com/firucu/1/edit?html,output

I think FLIP is a great technique for animations such as this. If you’re interested in learning more, go ahead and read Paul Lewis’ introduction to the technique.