new easing!

Author: KTibow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "3.4.12",
+  "version": "3.5.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {

src/lib/containers/Dialog.svelte

@@ -117,8 +117,8 @@
     visibility: visible;
     pointer-events: auto;
     animation:
-      dialogIn 0.5s cubic-bezier(0.05, 0.7, 0.1, 1),
-      opacity 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
+      dialogIn 500ms var(--m3-easing-decel),
+      opacity 100ms var(--m3-easing-decel);
   }
   dialog[open] .headline {
     animation: opacity 150ms;
@@ -129,7 +129,7 @@
   dialog[open] .buttons {
     position: relative;
     animation:
-      buttonsIn 0.5s cubic-bezier(0.05, 0.7, 0.1, 1),
+      buttonsIn 500ms var(--m3-easing-decel),
       opacity 200ms 100ms backwards;
   }
   dialog::backdrop {

src/lib/containers/SnackbarItem.svelte

@@ -25,8 +25,8 @@
     background-color: rgb(var(--m3-scheme-inverse-surface));
     color: rgb(var(--m3-scheme-inverse-on-surface));
     animation:
-      snackbarIn 0.5s cubic-bezier(0.05, 0.7, 0.1, 1),
-      opacity 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
+      snackbarIn 500ms var(--m3-easing-decel),
+      opacity 100ms var(--m3-easing-decel);
   }
   /*@TODO: Fix animation with different shaping or something*/
   @keyframes snackbarIn {

src/lib/forms/Switch.svelte

@@ -85,7 +85,7 @@
     background-color: rgb(var(--m3-scheme-outline));
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all 300ms cubic-bezier(0.271, -0.011, 0, 1.449);
+    transition: all 300ms var(--m3-easing);
 
     left: 0.5rem;
     top: 50%;
@@ -100,8 +100,8 @@
     color: rgb(var(--m3-scheme-on-primary-container));
     opacity: 0;
     transition:
-      opacity 300ms cubic-bezier(0.271, -0.011, 0, 1.449),
-      scale 300ms cubic-bezier(0.271, -0.011, 0, 1.449);
+      opacity 300ms var(--m3-easing),
+      scale 300ms var(--m3-easing);
   }
   .hover {
     position: absolute;
@@ -111,7 +111,7 @@
 
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all 300ms cubic-bezier(0.271, -0.011, 0, 1.449);
+    transition: all 300ms var(--m3-easing);
 
     left: 1rem;
     top: 50%;

src/lib/misc/easing.ts

@@ -33,13 +33,29 @@ export const easeEmphasized = createEase([
     [0.25, 1],
     [1, 1],
   ],
-]); /* css versions:
-with limited overshoot:
+]);
+/*
+=== NEW CSS VERSION ===
+is in var(--m3-easing), generated with
+const createCSSEase = (lutOptions: [number, number][][]) => {
+  const lut = lutOptions.map((args) => createBezierLUT(args)).flat();
+  let stops: number[] = [];
+  for (let t = 0; t <= 1; t += 0.01) {
+    const closestPoint = lut.find((p) => p[0] >= t);
+    const closestY = closestPoint ? closestPoint[1] : 1;
+    stops.push(closestY);
+  }
+
+  return `linear(${stops.map((s) => +s.toFixed(3)).join(", ")})`;
+};
+
+=== OLD CSS VERSION: LIMITED OVERSHOOT ===
 https://cdn.discordapp.com/attachments/1058124584286683237/1064238491904524308/w9blD3eMKQBwAAAABJRU5ErkJggg.png
 cubic-bezier(0.254, 0.029, 0, 1.2) is preferred, it is the most accurate to the acceleration
 cubic-bezier(0.356, 0.701, 0, 1.004) is the most accurate to the deceleration
 cubic-bezier(0.291, 0.281, 0, 1.2) has no weighting
-unlimited overshoot:
+
+=== OLD CSS VERSION: UNLIMITED OVERSHOOT ===
 https://cdn.discordapp.com/attachments/1058124584286683237/1064238129306927124/H47ZvYKwT8COjeuQXsI8AE4554luCbtMqAAqAJubZ9I2452QBcREREJgab5REREREKgZEpEREQkBEqmREREREKgZEpEREQkBEqmREREREKgZEpEREQkBEqmREREREKgZEpEREQkBP8PcBLo5kfHxSYAAAAASUVORK5CYII.png
 cubic-bezier(0.271, -0.011, 0, 1.449) is the most accurate to the acceleration (but has a large overshoot)
 the deceleration is the same as before

src/lib/misc/styles.css

@@ -34,6 +34,110 @@
 
   --m3-font: Roboto, system-ui, sans-serif;
 
+  --m3-easing: linear(
+    0,
+    0.001,
+    0.004,
+    0.008,
+    0.013,
+    0.022,
+    0.031,
+    0.043,
+    0.06,
+    0.076,
+    0.095,
+    0.122,
+    0.152,
+    0.188,
+    0.228,
+    0.281,
+    0.351,
+    0.449,
+    0.53,
+    0.594,
+    0.643,
+    0.68,
+    0.715,
+    0.74,
+    0.755,
+    0.778,
+    0.793,
+    0.807,
+    0.82,
+    0.833,
+    0.846,
+    0.852,
+    0.863,
+    0.869,
+    0.88,
+    0.885,
+    0.89,
+    0.9,
+    0.905,
+    0.91,
+    0.914,
+    0.919,
+    0.923,
+    0.927,
+    0.931,
+    0.935,
+    0.939,
+    0.943,
+    0.946,
+    0.95,
+    0.953,
+    0.956,
+    0.956,
+    0.959,
+    0.962,
+    0.965,
+    0.968,
+    0.968,
+    0.971,
+    0.973,
+    0.973,
+    0.976,
+    0.978,
+    0.98,
+    0.98,
+    0.982,
+    0.984,
+    0.984,
+    0.986,
+    0.986,
+    0.988,
+    0.989,
+    0.989,
+    0.991,
+    0.991,
+    0.992,
+    0.993,
+    0.993,
+    0.995,
+    0.995,
+    0.996,
+    0.996,
+    0.997,
+    0.997,
+    0.997,
+    0.997,
+    0.998,
+    0.998,
+    0.999,
+    0.999,
+    0.999,
+    0.999,
+    1,
+    1,
+    1,
+    1,
+    1,
+    1,
+    1,
+    1
+  );
+  --m3-easing-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
+
   accent-color: rgb(var(--m3-scheme-primary));
 }
 .m3-font-display-large,

src/lib/nav/NavListButton.svelte

@@ -102,8 +102,8 @@
     inset: 0 0;
     width: 100%;
     transition:
-      width 400ms cubic-bezier(0.356, 0.701, 0, 1.004),
-      inset 400ms cubic-bezier(0.356, 0.701, 0, 1.004);
+      width 400ms var(--m3-easing),
+      inset 400ms var(--m3-easing);
   }
   .selected > .icon-space > :global(svg) {
     color: rgb(var(--m3-scheme-on-secondary-container));

src/lib/nav/NavListLink.svelte

@@ -101,8 +101,8 @@
     inset: 0 0;
     width: 100%;
     transition:
-      width 400ms cubic-bezier(0.356, 0.701, 0, 1.004),
-      inset 400ms cubic-bezier(0.356, 0.701, 0, 1.004);
+      width 400ms var(--m3-easing),
+      inset 400ms var(--m3-easing);
   }
   .selected > .icon-space > :global(svg) {
     color: rgb(var(--m3-scheme-on-secondary-container));