Conditional animations

gui/dashboard/app.svelte

@@ -110,7 +110,7 @@
         <div
           in:receive={{ key: tile.id }}
           out:send={{ key: tile.id }}
-          animate:flip
+          animate:flip={{ duration: $settings.animate ? (d => Math.sqrt(d) * 120) : 0 }}
         >
           <TileRawValue {...tileProps(tile)} />
         </div>

gui/dashboard/lib.js

@@ -8,6 +8,7 @@ function createSettingsStore() {
     cols: 4,
     rows: 3,
     fontSize: 1,
+    animate: true,
   };
 
   const s = writable(defaults);
@@ -47,7 +48,7 @@ export const shuffle = crossfade({
     const transform = style.transform === 'none' ? '' : style.transform;
 
     return {
-      duration: 300,
+      duration: get(settings).animate ? 300 : 0,
       easing: quintOut,
       css: t => `
         transform: ${transform} scale(${t});

gui/dashboard/settings.svelte

@@ -42,6 +42,11 @@
     </select>
   </label>
 
+  <label>
+    Enable animations
+    <input type="checkbox" bind:checked={$settings.animate} />
+  </label>
+
   <label>
     Columns
     <input type="number" bind:value={$settings.cols} width="10" />