Desktop material design ripples

This is a motion spec created for the implementation of the revamped files .app on Chrome OS.

Our goal for the new set of built-in apps in Chrome OS is to bring Material design to desktop and this includes iterations/modifications such as this one.

Beyond a modified, smaller layout, we needed the MD "ripples" to also work on elements with non-mobile paradigm such as a dropdown menu whose button remains active (the 3 dots menu in the video).

To that purpose, we worked with the MD team to design a morphing ripple that goes from an ellipse to a rounded rectangle and then bursts out like a normal single-tap ripple. We tweaked the speed as well as the curves and the overall layout footprint to match our desktop specs and for animations to be as unobtrusive as possible.

non-gif version

active-state.mp4
2 MB
Download
Sebastien Gabriel
Design at Google. Chrome, Chrome OS and Android.
Get in touch

More by Sebastien Gabriel

View profile