Material Design Rocks

Material Design animations

Samples from "Material Design that Delights"

A collection of Material Design animations to take your app to the next level. Built using Material Design Components and CSS transitions/transforms. Featured in the "Material Design that Delights" presentation.

PWA splash screen to app

Good for making your PWA feel more immersive

The way it works is with an overlay with inlined styles matching the manifest.json color scheme. When the app is loaded the overlay transitions up and removes itself.

Grid card to page view animation

Good for transitioning to a details page

Use flexbox to display a grid of clickable cards. When activated use FLIP Animations to transform the card to an expanded view with a background shadow. Leave the other cards in their existing positions while doing it.

Expanding toolbar

Good for transitioning to a details page

Expand a standard height toolbar to details page background. It's good for creating color pop and visually pleasing seams. The color also transitions.

Grid layout with staggered entrance

Good for transitioning in a grid of cards

Transition in a grid of cards starting from the top left and radiating to the lower right.