style: 💄 change tranistions

jaskaransarkaria · Nov 20, 2021 · efc3da1 · efc3da1
1 parent b423fd1
commit efc3da1
Showing 1 changed file with 4 additions and 7 deletions.
diff --git a/src/components/HexGrid/HexGrid.svelte b/src/components/HexGrid/HexGrid.svelte
@@ -15,14 +15,14 @@
   let sourceElemArr: HTMLSourceElement[] = [...createEmptyArray()];
 
   const [send, receive] = crossfade({
-    duration: (d) => Math.sqrt(d * 200),
+    duration: (d) => Math.sqrt(d * 250),
 
     fallback(node, params) {
       const style = getComputedStyle(node);
       const transform = style.transform === 'none' ? '' : style.transform;
 
       return {
-        duration: 600,
+        duration: 800,
         easing: quintOut,
         css: (t) => `
 					transform: ${transform} scale(${t});
@@ -38,13 +38,10 @@
   };
 </script>
 
-<ul
-  transition:fade={{ delay: 200, duration: 800 }}
-  class="root-categories-container"
->
+<ul in:fade={{ delay: 200, duration: 900 }} class="root-categories-container">
   {#each data as category, idx (category.Id)}
     <li
-      in:receive={{ key: category.Id }}
+      in:receive={{ duration: 900, key: category.Id }}
       out:send={{ key: category.Id }}
       animate:flip
       class="hex"