style: 💄 revert zoom in effect

jaskaransarkaria · Nov 20, 2021 · 870acc1 · 870acc1
1 parent efc3da1
commit 870acc1
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 33 deletions.
diff --git a/.routify/config.js b/.routify/config.js
@@ -8,5 +8,5 @@ module.exports = {
   noHashScroll: false,
   distDir: 'dist',
   extensions: ['svelte', 'html', 'svx', 'md'],
-  started: '2021-11-20T09:54:41.478Z',
+  started: '2021-11-20T17:54:43.976Z',
 };
diff --git a/.routify/routes.js b/.routify/routes.js
@@ -1,10 +1,10 @@
 /**
  * @roxi/routify 2.7.3
- * File generated Sat Nov 20 2021 09:54:44 GMT+0000 (Greenwich Mean Time)
+ * File generated Sat Nov 20 2021 17:54:46 GMT+0000 (Greenwich Mean Time)
  */
 
 export const __version = '2.7.3';
-export const __timestamp = '2021-11-20T09:54:44.318Z';
+export const __timestamp = '2021-11-20T17:54:46.942Z';
 
 //buildRoutes
 import { buildClientTree } from '@roxi/routify/runtime/buildRoutes';

diff --git a/public/index.html b/public/index.html
@@ -9,9 +9,9 @@
 
     <link rel='icon' type='image/png' href='/favicon.png'>
     <link rel='stylesheet' href='/global.css'>
-    <link rel='stylesheet' href='/build/bundle-1637402081476.css'>
+    <link rel='stylesheet' href='/build/bundle-1637430883974.css'>
 
-    <script defer src='/build/bundle-1637402081476.js'></script>
+    <script defer src='/build/bundle-1637430883974.js'></script>
   </head>
   <body>
   </body>

diff --git a/src/components/HexGrid/HexGrid.svelte b/src/components/HexGrid/HexGrid.svelte
@@ -1,7 +1,5 @@
 <script lang="typescript">
-  import { flip } from 'svelte/animate';
-  import { crossfade, fade } from 'svelte/transition';
-  import { quintOut } from 'svelte/easing';
+  import { fade } from 'svelte/transition';
   import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.svelte';
 
   import type { Base, BaseFn } from '@/types/base';
@@ -14,38 +12,15 @@
   let imgElemArr: HTMLImageElement[] = [...createEmptyArray()];
   let sourceElemArr: HTMLSourceElement[] = [...createEmptyArray()];
 
-  const [send, receive] = crossfade({
-    duration: (d) => Math.sqrt(d * 250),
-
-    fallback(node, params) {
-      const style = getComputedStyle(node);
-      const transform = style.transform === 'none' ? '' : style.transform;
-
-      return {
-        duration: 800,
-        easing: quintOut,
-        css: (t) => `
-					transform: ${transform} scale(${t});
-					opacity: ${t}
-				`,
-      };
-    },
-  });
-
   const handleError = (idx: number) => {
     imgElemArr[idx].onerror = null;
     sourceElemArr[idx].srcset = imgElemArr[idx].src;
   };
 </script>
 
-<ul in:fade={{ delay: 200, duration: 900 }} class="root-categories-container">
+<ul in:fade={{ delay: 300, duration: 900 }} class="root-categories-container">
   {#each data as category, idx (category.Id)}
-    <li
-      in:receive={{ duration: 900, key: category.Id }}
-      out:send={{ key: category.Id }}
-      animate:flip
-      class="hex"
-    >
+    <li class="hex">
       <div class="hex-in">
         <div class="hex-link">
           <picture>