Reduced Motion Animations (for #192)

build/to-stylesheet.js

@@ -53,18 +53,37 @@ ${dark_propsMeta}
  })
 
  if (filename.includes('animations')) {
- let dark_props = Object.entries(props)
- .filter(([prop, val]) =>
- prop.includes('-@media:dark'))
 
- dark_props.forEach(([prop, val], index) => {
- let hasDarkKeyframe = prop.endsWith('-@media:dark') && val.trim().startsWith('@keyframe')
- if (hasDarkKeyframe) {
- appendedMeta += `
-@media (--OSdark) {
- ${val.trim().replace(/\n/g, '\n ')};
-}`
+ const [
+ dark_props,
+ reduced_props,
+ ] = Object.entries(props).reduce((acc, prop) => {
+ const [key, val] = prop;
+
+ if (val.trim().startsWith('@keyframe')) {
+ const _val = val.trim().replace(/\n/g, '\n ');
+ key.endsWith('-@media:dark') && acc[0].push([key, _val]);
+ key.endsWith('-@media:reduced') && acc[1].push([key, _val]);
  }
+
+ return acc;
+ }, [[], []])
+
+
+ dark_props.forEach(([_, val]) => {
+ appendedMeta += `
+@media (--OSdark) {
+ ${val};
+}
+ `
+ })
+
+ reduced_props.forEach(([_, val]) => {
+ appendedMeta += `
+@media (--motionNotOK) {
+ ${val};
+}
+ `
  })
  }
 

docsite/index.html

@@ -2413,6 +2413,7 @@ <h5>Ease Steps</h5>
  <header>
  <h2>Animations</h2>
  <p>Premade <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect">keyframe effects</a> allow you to orchestrate your own animations. Plus, a few nice attention-grabbers and indeterminate state animations.</p>
+ <p>All animations automatically offer a reduced motion fallback. Slide and scale animations crossfade between their start and end states, while all the attention getting animations reduce to a simple attention getting blink.</p>
  </header>
  <div class="block-wrap">
  <div>
@@ -2423,6 +2424,7 @@ <h5>The Props</h5>
  --animation-fade-{in,out}-bloom
  --animation-shake-{x,y}
 
+ --animation-scale-{up,down}
  --animation-slide-out-{up,down,left,right}
  --animation-slide-in-{up,down,left,right}
 

src/props.animations.css

@@ -126,4 +126,258 @@
  10% { opacity: 1; filter: brightness(0.5) blur(10px) }
  0% { opacity: 1; filter: brightness(1) blur(0) }
  };
+}
+@media (--motionNotOK) {
+ @keyframes scale-up {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ transform: scale(1);
+ }
+ 50.01% {
+ transform: scale(1.25);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1.25);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes scale-down {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ transform: scale(1);
+ }
+ 50.01% {
+ transform: scale(0.75);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(0.75);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes slide-out-up {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ transform: translateY(0%);
+ }
+ 50.01% {
+ transform: translateY(-100%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(-100%);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes slide-out-down {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ transform: translateY(0%);
+ }
+ 50.01% {
+ transform: translateY(100%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(100%);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes slide-out-right {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ transform: translateX(0%);
+ }
+ 50.01% {
+ transform: translateX(100%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(100%);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes slide-out-left {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ transform: translateX(0%);
+ }
+ 50.01% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(-100%);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes slide-in-up {
+ 0% {
+ opacity: 1;
+ transform: translateY(100%);
+ }
+ 50% {
+ opacity: 0;
+ transform: translateY(100%);
+ }
+ 50.01% {
+ transform: translateY(0%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0%);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes slide-in-down {
+ 0% {
+ opacity: 1;
+ transform: translateY(-100%);
+ }
+ 50% {
+ opacity: 0;
+ transform: translateY(-100%);
+ }
+ 50.01% {
+ transform: translateY(0%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0%);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes slide-in-right {
+ 0% {
+ opacity: 1;
+ transform: translateX(-100%);
+ }
+ 50% {
+ opacity: 0;
+ transform: translateX(-100%);
+ }
+ 50.01% {
+ transform: translateX(0%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0%);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes slide-in-left {
+ 0% {
+ opacity: 1;
+ transform: translateX(100%);
+ }
+ 50% {
+ opacity: 0;
+ transform: translateX(100%);
+ }
+ 50.01% {
+ transform: translateX(0%);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0%);
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes shake-x {
+ 0%, 100% {
+ opacity: 1
+ }
+ 50% {
+ opacity: .5
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes shake-y {
+ 0%, 100% {
+ opacity: 1
+ }
+ 50% {
+ opacity: .5
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes spin {
+ 0%, 100% {
+ opacity: 1
+ }
+ 50% {
+ opacity: .5
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes ping {
+ 0%, 100% {
+ opacity: 1
+ }
+ 50% {
+ opacity: .5
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes float {
+ 0%, 100% {
+ opacity: 1
+ }
+ 50% {
+ opacity: .5
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes bounce {
+ 0%, 100% {
+ opacity: 1
+ }
+ 50% {
+ opacity: .5
+ }
+ };
+}
+@media (--motionNotOK) {
+ @keyframes pulse {
+ 0%, 100% {
+ opacity: 1
+ }
+ 50% {
+ opacity: .5
+ }
+ };
 }