diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index abc99502..568f611a 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -35,6 +35,29 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
 }`
   }
 
+  if (filename.includes('animations')) {
+    appendedMeta += `
+@media (--motionOK) {
+  :where(html) {
+    --scale-duration: .5s;
+    --scale-easing: var(--ease-3);
+    --slide-duration: .5s;
+    --slide-easing: var(--ease-3);
+    --shake-duration: .75s;
+    --shake-easing: var(--ease-out-5);
+    --spin-easing: linear;
+    --ping-duration: 5s;
+    --ping-easing: var(--ease-out-3);
+    --blink-duration: 1s;
+    --float-ease: var(--ease-out-3);
+    --bounce-duration: 2s;
+    --bounce-ease: var(--ease-squish-2);
+    --pulse-duration: 2s;
+    --pulse-ease: var(--ease-out-3);
+  }
+}`
+  }
+
   file.write('}\n')
   file.end(appendedMeta)
 }
\ No newline at end of file
diff --git a/docsite/index.css b/docsite/index.css
index ff0fcb97..6cd6e36f 100644
--- a/docsite/index.css
+++ b/docsite/index.css
@@ -1352,9 +1352,13 @@ input[type="range"] {
   --animation-slide-down-fade-out: 
     var(--animation-fade-out) forwards,
     var(--animation-slide-out-down);
+
   /* important required because JS is writing props into inline styles */
-  animation-timing-function: var(--ease-squish-3) !important;
   animation-duration: 1s !important;
+
+  @media (--motionOK) {
+    animation-timing-function: var(--ease-3), var(--ease-squish-3) !important;
+  }
 }
 
 .shake-fade-combo {
@@ -1369,7 +1373,10 @@ input[type="range"] {
     var(--animation-scale-down),
     var(--animation-fade-out)
   ;
-  animation-timing-function: var(--ease-squish-4) !important;
+
+  @media (--motionOK) {
+    animation-timing-function: var(--ease-squish-4), var(--ease-3) !important;
+  }
 }
 
 
diff --git a/docsite/index.html b/docsite/index.html
index 4989367e..e4c76b7b 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2386,8 +2386,14 @@ <h6>Slide Fade</h6>
                   animation: 
                     var(--animation-fade-out) forwards,
                     var(--animation-slide-out-down);
-                  animation-timing-function: var(--ease-squish-3);
                   animation-duration: 1s;
+
+                  /* change slide timing to squish */
+                  @media (--motionOK) {
+                    animation-timing-function: 
+                      var(--ease-3), 
+                      var(--ease-squish-3);
+                  }
                 }
               </code></pre>
             </div>
@@ -2432,7 +2438,13 @@ <h6>Push Out</h6>
                   animation: 
                     var(--animation-scale-down),
                     var(--animation-fade-out);
-                  animation-timing-function: var(--ease-squish-4);
+
+                  /* change scale timing to squish */
+                  @media (--motionOK) {
+                    animation-timing-function: 
+                      var(--ease-squish-4), 
+                      var(--ease-3);
+                  }
                 }
               </code></pre>
             </div>
diff --git a/src/props.animations.css b/src/props.animations.css
index f2a96de1..12eacded 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -1,24 +1,24 @@
 :where(html) {
   --animation-fade-in: fade-in .5s var(--ease-3);
   --animation-fade-out: fade-out .5s var(--ease-3);
-  --animation-scale-up: scale-up .5s var(--ease-3);
-  --animation-scale-down: scale-down .5s var(--ease-3);
-  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
-  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
-  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
-  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
-  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
-  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
-  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
-  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
-  --animation-shake-x: shake-x .75s var(--ease-out-5);
-  --animation-shake-y: shake-y .75s var(--ease-out-5);
-  --animation-spin: spin 2s linear infinite;
-  --animation-ping: ping 5s var(--ease-out-3) infinite;
-  --animation-blink: blink 1s var(--ease-out-3) infinite;
-  --animation-float: float 3s var(--ease-in-out-3) infinite;
-  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
-  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
+  --animation-scale-up: scale-up var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start));
+  --animation-scale-down: scale-down var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start));
+  --animation-slide-out-up: slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-out-down: slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-out-right: slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-out-left: slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-in-up: slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-in-down: slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-in-right: slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-in-left: slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-shake-x: shake-x var(--shake-duration, 3s) var(--shake-easing, steps(1));
+  --animation-shake-y: shake-y var(--shake-duration, 3s) var(--shake-easing, steps(1));
+  --animation-spin: spin 2s var(--spin-easing, steps(4, jump-start)) infinite;
+  --animation-ping: ping var(--ping-duration, 4s) var(--ping-easing, steps(4, jump-start)) infinite;
+  --animation-blink: blink var(--blink-duration, 2s) var(--ease-out-3) infinite;
+  --animation-float: float 3s var(--float-ease, steps(2, jump-start)) infinite;
+  --animation-bounce: bounce var(--bounce-duration, 4s) var(--bounce-ease, steps(2)) infinite;
+  --animation-pulse: pulse 2s var(--pulse-ease, steps(2, jump-start)) infinite;
 }
 
 @keyframes fade-in {
@@ -98,4 +98,23 @@
 }
 @keyframes pulse {
   50% { transform: scale(.9,.9) }
+}
+@media (--motionOK) {
+  :where(html) {
+    --scale-duration: .5s;
+    --scale-easing: var(--ease-3);
+    --slide-duration: .5s;
+    --slide-easing: var(--ease-3);
+    --shake-duration: .75s;
+    --shake-easing: var(--ease-out-5);
+    --spin-easing: linear;
+    --ping-duration: 5s;
+    --ping-easing: var(--ease-out-3);
+    --blink-duration: 1s;
+    --float-ease: var(--ease-out-3);
+    --bounce-duration: 2s;
+    --bounce-ease: var(--ease-squish-2);
+    --pulse-duration: 2s;
+    --pulse-ease: var(--ease-out-3);
+  }
 }
\ No newline at end of file
diff --git a/src/props.animations.js b/src/props.animations.js
index 26ec4836..9cbdf242 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -9,57 +9,57 @@ export default {
 @keyframes fade-out {
   to { opacity: 0 }
 }`,
-  "--animation-scale-up": "scale-up .5s var(--ease-3)", 
+  "--animation-scale-up": "scale-up var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start))", 
   "--animation-scale-up-@": `
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }`,
-  "--animation-scale-down": "scale-down .5s var(--ease-3)", 
+  "--animation-scale-down": "scale-down var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start))", 
   "--animation-scale-down-@": `
 @keyframes scale-down {
   to { transform: scale(.75) }
 }`,
-  "--animation-slide-out-up": "slide-out-up .5s var(--ease-3)", 
+  "--animation-slide-out-up": "slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-out-up-@": `
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
 }`,
-  "--animation-slide-out-down": "slide-out-down .5s var(--ease-3)", 
+  "--animation-slide-out-down": "slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-out-down-@": `
 @keyframes slide-out-down {
   to { transform: translateY(100%) }
 }`,
-  "--animation-slide-out-right": "slide-out-right .5s var(--ease-3)", 
+  "--animation-slide-out-right": "slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-out-right-@": `
 @keyframes slide-out-right {
   to { transform: translateX(100%) }
 }`,
-  "--animation-slide-out-left": "slide-out-left .5s var(--ease-3)", 
+  "--animation-slide-out-left": "slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-out-left-@": `
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
 }`,
-  "--animation-slide-in-up": "slide-in-up .5s var(--ease-3)", 
+  "--animation-slide-in-up": "slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-in-up-@": `
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
 }`,
-  "--animation-slide-in-down": "slide-in-down .5s var(--ease-3)", 
+  "--animation-slide-in-down": "slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-in-down-@": `
 @keyframes slide-in-down {
   from { transform: translateY(-100%) }
 }`,
-  "--animation-slide-in-right": "slide-in-right .5s var(--ease-3)", 
+  "--animation-slide-in-right": "slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-in-right-@": `
 @keyframes slide-in-right {
   from { transform: translateX(-100%) }
 }`,
-  "--animation-slide-in-left": "slide-in-left .5s var(--ease-3)", 
+  "--animation-slide-in-left": "slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-in-left-@": `
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
 }`,
-  "--animation-shake-x": "shake-x .75s var(--ease-out-5)", 
+  "--animation-shake-x": "shake-x var(--shake-duration, 3s) var(--shake-easing, steps(1))", 
   "--animation-shake-x-@": `
 @keyframes shake-x {
   0%, 100% { transform: translateX(0%) }
@@ -68,7 +68,7 @@ export default {
   60% { transform: translateX(-5%) }
   80% { transform: translateX(5%) }
 }`,
-  "--animation-shake-y": "shake-y .75s var(--ease-out-5)", 
+  "--animation-shake-y": "shake-y var(--shake-duration, 3s) var(--shake-easing, steps(1))", 
   "--animation-shake-y-@": `
 @keyframes shake-y {
   0%, 100% { transform: translateY(0%) }
@@ -77,12 +77,12 @@ export default {
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
 }`,
-  "--animation-spin": "spin 2s linear infinite", 
+  "--animation-spin": "spin 2s var(--spin-easing, steps(4, jump-start)) infinite", 
   "--animation-spin-@": `
 @keyframes spin {
   to { transform: rotate(1turn) }
 }`,
-  "--animation-ping": "ping 5s var(--ease-out-3) infinite", 
+  "--animation-ping": "ping var(--ping-duration, 4s) var(--ping-easing, steps(4, jump-start)) infinite", 
   "--animation-ping-@": `
 @keyframes ping {
   90%, 100% {
@@ -90,7 +90,7 @@ export default {
     opacity: 0;
   }
 }`,
-  "--animation-blink": "blink 1s var(--ease-out-3) infinite", 
+  "--animation-blink": "blink var(--blink-duration, 2s) var(--ease-out-3) infinite", 
   "--animation-blink-@": `
 @keyframes blink {
   0%, 100% {
@@ -100,19 +100,19 @@ export default {
     opacity: .5
   }
 }`,
-  "--animation-float": "float 3s var(--ease-in-out-3) infinite", 
+  "--animation-float": "float 3s var(--float-ease, steps(2, jump-start)) infinite", 
   "--animation-float-@": `
 @keyframes float {
   50% { transform: translateY(-25%) }
 }`,
-  "--animation-bounce": "bounce 2s var(--ease-squish-2) infinite", 
+  "--animation-bounce": "bounce var(--bounce-duration, 4s) var(--bounce-ease, steps(2)) infinite", 
   "--animation-bounce-@": `
 @keyframes bounce {
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
 }`,
-  "--animation-pulse": "pulse 2s var(--ease-out-3) infinite", 
+  "--animation-pulse": "pulse 2s var(--pulse-ease, steps(2, jump-start)) infinite", 
   "--animation-pulse-@": `
 @keyframes pulse {
   50% { transform: scale(.9,.9) }