Scope animations

src/organisms/Carousel.svelte

@@ -18,6 +18,7 @@
     export let init = undefined
 
     // Variables
+    let scope
     let hover
     let currentIndex = 0
     $: currentPhoto = photos[currentIndex] || null
@@ -93,7 +94,7 @@
     */
     onMount(() => {
         // Entering transition
-        animateIn()
+        animateIn(scope)
 
         // Hover function
         hover = event => {
@@ -138,6 +139,7 @@
 <div class="carousel"
     on:touchstart={swipeStart}
     on:touchend={swipeEnd}
+    bind:this={scope}
 >
     <div class="wrap">
         <div class="gallery">

src/organisms/Locations.svelte

@@ -14,6 +14,7 @@
 
     // Variables
     const transitionDuration = 800
+    let list
     let filterLocations
     let continentsToDisplay = []
     let continentsFiltered = []
@@ -35,7 +36,7 @@
     */
     onMount(() => {
         // Entering transition
-        animateIn()
+        animateIn(list)
     })
 </script>
 
@@ -57,7 +58,7 @@
         {/each}
     </ul>
 
-    <div class="browse__locations" id="locations_list">
+    <div class="browse__locations" id="locations_list" bind:this={list}>
     {#each filteredLocations as location (location.id)}
         <div animate:flip="{{ duration: transitionDuration }}"
             in:receive="{{ key: location.id }}"