From 715c0ab170c5bfc387bf406f726a98a8bbf819c7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 11 Sep 2020 14:31:01 +0100
Subject: [PATCH] Add better animations when editing workflow blocks and
 changing workflows

---
 .../flowchart/FlowChart.svelte                | 23 +++++++++++++++----
 .../WorkflowBuilder/flowchart/FlowItem.svelte |  7 +-----
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte
index 9d0876cfd1..c4f83a128b 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte
+++ b/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>
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
index 9d6e322a96..2ee7b92539 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
+++ b/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" />