From c8f0e419b4fc94229e9780f9099df638f420eec8 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Wed, 20 Jan 2021 12:41:34 +0300
Subject: [PATCH] Add base animation

---
 src/CarouselChild.svelte             | 13 +++++++++++--
 src/stories/ImageCarouselView.svelte | 14 ++++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/CarouselChild.svelte b/src/CarouselChild.svelte
index 6ef5a71..d886f25 100644
--- a/src/CarouselChild.svelte
+++ b/src/CarouselChild.svelte
@@ -1,5 +1,7 @@
 <script>
   import { onMount } from 'svelte'
+  import { fly } from 'svelte/transition';
+
   import { generateId } from './utils/id'
   import { store } from './store'
 
@@ -10,10 +12,17 @@
 </script>
 
 {#if id === $store.currentItemId}
-<slot></slot>
+<div
+  class="main-container"
+  in:fly="{{ x: 200, duration: 200, delay: 200 }}"
+  out:fly="{{ x: -200, duration: 200 }}"
+>
+  <slot></slot>
+</div>
 {/if }
 
 <style>
   .main-container {
+    width: 100%;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/stories/ImageCarouselView.svelte b/src/stories/ImageCarouselView.svelte
index f58f783..232bea7 100644
--- a/src/stories/ImageCarouselView.svelte
+++ b/src/stories/ImageCarouselView.svelte
@@ -11,10 +11,14 @@
 <div class="main-container">
   <ImageCarousel {arrows}>
     <CarouselChild>
-      <h1>Element 1</h1>
+      <div class="child-content-container">
+        <h1>Element 1</h1>
+      </div>
     </CarouselChild>
     <CarouselChild>
-      <h1>Element 2</h1>
+      <div class="child-content-container">
+        <h1>Element 2</h1>
+      </div>
     </CarouselChild>
   </ImageCarousel>
 </div>
@@ -24,4 +28,10 @@
     display: flex;
     width: 100%;
   }
+  .child-content-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>
\ No newline at end of file