Motion

M3 Expressive's springs as --md-sys-motion-spatial-* and --md-sys-motion-effects-*, each with its own duration. Reduced motion makes all of them instant.

Position, size and shape move on the spatial springs, which overshoot — fast for small elements, slow for large ones. Colour and opacity move on the effects springs, which never overshoot. Always pair an easing with its duration; everything that moves goes through these tokens, so reduced motion makes it instant. The Standard scheme (motion.scheme) swaps the spatial springs for a restrained set.

@foreach (['spatial-fast', 'spatial-default', 'spatial-slow', 'effects-fast', 'effects-default', 'effects-slow'] as $spring)
--md-sys-motion-{{ $spring }}
@endforeach

1,204 files

x-figure