Add better animations when editing workflow blocks and changing workflows

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte

@@ -19,12 +19,18 @@
   }
 </script>
 
-<section>
+<section class="canvas">
   {#each blocks as block, idx (block.id)}
-    <FlowItem {onSelect} {block} />
-    {#if idx !== blocks.length - 1}
-      <Arrow />
-    {/if}
+    <div
+      class="block"
+      animate:flip={{ duration: 600 }}
+      in:fade
+      out:fly={{ x: 100 }}>
+      <FlowItem {onSelect} {block} />
+      {#if idx !== blocks.length - 1}
+        <Arrow />
+      {/if}
+    </div>
   {/each}
 </section>
 
@@ -36,4 +42,11 @@
     align-items: center;
     flex-direction: column;
   }
+
+  .block {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
 </style>

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte

@@ -1,6 +1,5 @@
 <script>
   import mustache from "mustache"
-  import { fade } from "svelte/transition"
   import { workflowStore } from "builderStore"
 
   export let onSelect
@@ -16,11 +15,7 @@
   }
 </script>
 
-<div
-  transition:fade
-  class={`${block.type} hoverable`}
-  class:selected
-  on:click={selectBlock}>
+<div class={`${block.type} hoverable`} class:selected on:click={selectBlock}>
   <header>
     {#if block.type === 'TRIGGER'}
       <i class="ri-lightbulb-fill" />