WIP Animations all over site

- Run a transition In for each page
- Involve a "loader" panel on page change
- TODO: tweak the animations and finish the concept

src/organisms/Carousel.svelte

@@ -6,6 +6,9 @@
     const dispatch = createEventDispatcher()
     const { page } = stores()
 
+    // Animations
+    import { animateIn } from '../animations/carousel'
+
     // Components
     import IconArrow from '../atoms/IconArrow'
 
@@ -89,6 +92,9 @@
     ** Run code on browser only
     */
     onMount(() => {
+        // Entering transition
+        animateIn()
+
         // Hover function
         hover = event => {
             const button = event.currentTarget.querySelector('button')

src/organisms/Locations.svelte

@@ -1,17 +1,17 @@
 <script>
     import { onMount } from 'svelte'
     import { flip } from 'svelte/animate'
-    import { crossfadeReceive, crossfadeSend } from '../utils/animations'
+    import { receive, send } from '../animations/crossfade'
     import { locations, countries, continents } from '../utils/store'
-
-    // Dependencies
-    import AOS from 'aos'
     import { throttle } from '../utils/functions'
 
     // Components
     import Button from '../atoms/Button'
     import Location from '../molecules/Location'
 
+    // Animations
+    import { animateIn } from '../animations/Locations'
+
     // Variables
     const transitionDuration = 800
     let filterLocations
@@ -31,13 +31,11 @@
 
 
     /*
-    ** Run code on browser only
+    ** Run code on component mount
     */
     onMount(() => {
-        // Scroll apparitions
-        if (process.browser) {
-            AOS.init()
-        }
+        // Entering transition
+        animateIn()
     })
 </script>
 
@@ -62,8 +60,8 @@
     <div class="browse__locations" id="locations_list">
     {#each filteredLocations as location (location.id)}
         <div animate:flip="{{ duration: transitionDuration }}"
-            in:crossfadeReceive="{{ key: location.id }}"
-            out:crossfadeSend="{{ key: location.id }}"
+            in:receive="{{ key: location.id }}"
+            out:send="{{ key: location.id }}"
         >
             <Location {location} />
         </div>