Motion
Durations and easing curves, and one rule that covers the rest: the system respects «reduce motion» wholesale, through a single block in the base layer rather than component by component.
On this page
- Where the setting changes the scenario rather than the speed — an autoplaying carousel should not be sped up but not started — the component reads
matchMediaitself.
Motion
| Token | Value |
|---|---|
--gr-duration-fast--gr-duration-fast | 150ms |
--gr-duration-base--gr-duration-base | 200ms |
--gr-duration-slow--gr-duration-slow | 300ms |
--gr-ease-out--gr-ease-out | cubic-bezier(0.16, 1, 0.3, 1) |
--gr-ease-in--gr-ease-in | cubic-bezier(0.7, 0, 0.84, 0) |