/* * Motion, as M3 Expressive's springs. * * M3 Expressive moves on physics, not on a duration and a curve: every transition is a * spring with a damping ratio and a stiffness. CSS cannot run a spring, so each one is * sampled into a `linear()` easing over the time it takes to settle (to within 0.1% of its * travel) — 49 points, past the resolution anyone can see at 60 Hz. The constants are * androidx Compose Material 3's own (tokens/ExpressiveMotionTokens.kt, Apache-2.0): * * spatial — position, size, shape. Underdamped, so the fast one overshoots by 9% and * settles back: that small bounce is what reads as Expressive. * effects — colour and opacity. Critically damped; a colour must never overshoot. * * Use a pair together, easing and duration, or the curve is stretched over the wrong time * and the bounce lands late: * * transition: transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast); * class="transition-transform duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast" * * The cubic-bezier easings below are M3's non-spring set (@material/web token values, * Apache-2.0, © Google LLC), for the few places a duration is fixed by something outside * the page — a view transition, an animated scroll. * * Reduced motion zeroes every duration here, so anything that animates through these tokens * turns instant with no per-component check; anything that animates without them is a bug. */ :root { /* damping 0.6, stiffness 800; settles in 360ms, peaks at 1.094 */ --md-sys-motion-spatial-fast: linear(0, 0.0206, 0.0754, 0.1544, 0.2492, 0.3524, 0.458, 0.5613, 0.6588, 0.7479, 0.8269, 0.895, 0.952, 0.9981, 1.0338, 1.0603, 1.0783, 1.0893, 1.0942, 1.0943, 1.0906, 1.0842, 1.0759, 1.0665, 1.0565, 1.0465, 1.037, 1.0281, 1.0201, 1.0131, 1.0072, 1.0023, 0.9984, 0.9955, 0.9934, 0.992, 0.9912, 0.991, 0.9912, 0.9917, 0.9924, 0.9932, 0.9942, 0.9951, 0.996, 0.9969, 0.9977, 0.9984, 1); --md-sys-motion-spatial-fast-duration: 360ms; /* damping 0.8, stiffness 380; settles in 440ms, peaks at 1.015 */ --md-sys-motion-spatial-default: linear(0, 0.0145, 0.0527, 0.1076, 0.1736, 0.2461, 0.3214, 0.3968, 0.4702, 0.54, 0.6051, 0.665, 0.7193, 0.7679, 0.8108, 0.8483, 0.8807, 0.9083, 0.9316, 0.951, 0.9669, 0.9798, 0.99, 0.998, 1.004, 1.0085, 1.0116, 1.0136, 1.0147, 1.0151, 1.0151, 1.0146, 1.0138, 1.0128, 1.0118, 1.0106, 1.0095, 1.0084, 1.0073, 1.0063, 1.0053, 1.0045, 1.0037, 1.0031, 1.0025, 1.002, 1.0015, 1.0011, 1); --md-sys-motion-spatial-default-duration: 440ms; /* damping 0.8, stiffness 200; settles in 600ms, peaks at 1.015 */ --md-sys-motion-spatial-slow: linear(0, 0.0142, 0.0517, 0.1057, 0.1706, 0.2421, 0.3166, 0.3912, 0.464, 0.5334, 0.5984, 0.6583, 0.7127, 0.7615, 0.8047, 0.8426, 0.8755, 0.9036, 0.9274, 0.9473, 0.9638, 0.9771, 0.9878, 0.9962, 1.0027, 1.0074, 1.0108, 1.0131, 1.0144, 1.0151, 1.0151, 1.0148, 1.0141, 1.0132, 1.0122, 1.0111, 1.0099, 1.0088, 1.0077, 1.0067, 1.0057, 1.0049, 1.0041, 1.0034, 1.0027, 1.0022, 1.0017, 1.0013, 1); --md-sys-motion-spatial-slow-duration: 600ms; /* damping 1.0, stiffness 3800; settles in 150ms */ --md-sys-motion-effects-fast: linear(0, 0.0163, 0.0576, 0.1147, 0.1807, 0.2507, 0.3214, 0.3902, 0.4558, 0.5172, 0.5737, 0.6253, 0.6718, 0.7136, 0.7508, 0.7837, 0.8128, 0.8383, 0.8606, 0.8801, 0.897, 0.9117, 0.9244, 0.9353, 0.9448, 0.9529, 0.9599, 0.9658, 0.9709, 0.9753, 0.979, 0.9822, 0.9849, 0.9872, 0.9892, 0.9909, 0.9923, 0.9935, 0.9945, 0.9954, 0.9961, 0.9967, 0.9972, 0.9977, 0.998, 0.9983, 0.9986, 0.9988, 1); --md-sys-motion-effects-fast-duration: 150ms; /* damping 1.0, stiffness 1600; settles in 240ms */ --md-sys-motion-effects-default: linear(0, 0.0175, 0.0616, 0.1219, 0.1912, 0.2642, 0.3374, 0.4082, 0.4751, 0.5372, 0.594, 0.6454, 0.6916, 0.7326, 0.7689, 0.8009, 0.8288, 0.8532, 0.8743, 0.8926, 0.9084, 0.922, 0.9337, 0.9437, 0.9523, 0.9596, 0.9658, 0.9711, 0.9756, 0.9794, 0.9826, 0.9854, 0.9877, 0.9897, 0.9913, 0.9927, 0.9939, 0.9949, 0.9957, 0.9964, 0.997, 0.9975, 0.9979, 0.9982, 0.9985, 0.9988, 0.999, 0.9991, 1); --md-sys-motion-effects-default-duration: 240ms; /* damping 1.0, stiffness 800; settles in 330ms */ --md-sys-motion-effects-slow: linear(0, 0.0166, 0.0586, 0.1165, 0.1833, 0.254, 0.3253, 0.3947, 0.4606, 0.5221, 0.5788, 0.6303, 0.6768, 0.7184, 0.7554, 0.7881, 0.8169, 0.8421, 0.8641, 0.8833, 0.8999, 0.9144, 0.9268, 0.9375, 0.9467, 0.9546, 0.9614, 0.9672, 0.9722, 0.9764, 0.98, 0.9831, 0.9857, 0.9879, 0.9898, 0.9914, 0.9927, 0.9939, 0.9948, 0.9956, 0.9963, 0.9969, 0.9974, 0.9978, 0.9982, 0.9985, 0.9987, 0.9989, 1); --md-sys-motion-effects-slow-duration: 330ms; --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-duration-short: 150ms; --md-sys-motion-duration-medium: 300ms; --md-sys-motion-duration-long: 500ms; } @media (prefers-reduced-motion: reduce) { :root { --md-sys-motion-spatial-fast-duration: 0ms; --md-sys-motion-spatial-default-duration: 0ms; --md-sys-motion-spatial-slow-duration: 0ms; --md-sys-motion-effects-fast-duration: 0ms; --md-sys-motion-effects-default-duration: 0ms; --md-sys-motion-effects-slow-duration: 0ms; --md-sys-motion-duration-short: 0ms; --md-sys-motion-duration-medium: 0ms; --md-sys-motion-duration-long: 0ms; } }