feat(front): disables all page transitions via

front/src/lib/_utils/index.js

@@ -31,3 +31,11 @@ export const isElementOutsideViewport = (element) => {
     rect.top > window.innerHeight
   );
 };
+
+/**
+ * Determine if a browser/system setting prefers reduced motion
+ * @returns boolean
+ */
+export const motionless = () => {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};

front/src/lib/components/PageTransition.svelte

@@ -1,14 +1,10 @@
 <script>
   import { navigating } from '$app/stores';
-  import { isElementOutsideViewport, scrollTop } from '@utils';
+  import { isElementOutsideViewport, motionless, scrollTop } from '@utils';
 
   export let transitionKey;
   let to;
 
-  function motionless() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  }
-
   function doIt() {
     return {
       duration: motionless() === true ? 0 : 500,

front/src/lib/components/TransitionElasticFly.svelte

@@ -2,13 +2,15 @@
   import { navigating } from '$app/stores';
   import { circInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
+  import { motionless } from '@utils';
   export let transitionKey;
   export let classList = false;
   export let duration = 333;
   export let delay = 500;
   let initialHeight;
 
   function animateOut(node) {
+    if (motionless() === true) return false;
     const nodeOut = node.currentTarget;
 
     if ($navigating) {
@@ -30,6 +32,7 @@
   }
 
   function animateIn(node) {
+    if (motionless() === true) return false;
     const nodeIn = node.target;
     const newHeight = nodeIn.offsetHeight;
 
@@ -49,15 +52,26 @@
       }
     }
   }
+
+  /**
+   * Along with `motionless()`, this function assists with built-in Svelte transitions
+   * @param node
+   * @param options
+   */
+  function motion(node, options) {
+    if (motionless() === false) {
+      return options.fn(node, options);
+    }
+  }
 </script>
 
 {#key transitionKey}
   <div
     class="transition-elastic-fly-container {classList ? classList : ''}"
     on:outrostart={animateOut}
     on:introstart={animateIn}
-    out:fly|global={{ x: -1000, duration, easing: circInOut }}
-    in:fly|global={{ x: -1000, duration, delay, easing: circInOut }}
+    out:motion|global={{ fn: fly, x: -1000, duration, easing: circInOut }}
+    in:motion|global={{ fn: fly, x: -1000, duration, delay, easing: circInOut }}
   >
     <slot />
   </div>

front/src/lib/components/TransitionFade.svelte

@@ -1,20 +1,23 @@
 <script>
+  import { motionless } from '@utils';
   export let transitionKey;
   export let duration = 500;
   export let delay = 600;
   export let classList = false;
 
   function doIt() {
     return {
-      duration,
+      duration: motionless() === true ? 0 : duration,
     };
   }
 
   function animateOut(node) {
+    if (motionless() === true) return false;
     document.body.classList.toggle('animating-page', true);
   }
 
   function animateIn(node) {
+    if (motionless() === true) return false;
     setTimeout(() => {
       document.body.classList.toggle('animating', false);
       document.body.classList.toggle('animating-page', false);