From df1e6f7311b4fe218a98ba98ff6a91ad7af2f9a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 17 Nov 2021 21:51:26 +0100
Subject: [PATCH] Add reveal animation on Locations list

---
 src/components/organisms/Locations.svelte | 42 +++++++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/Locations.svelte b/src/components/organisms/Locations.svelte
index 140dfe6..3e3833b 100644
--- a/src/components/organisms/Locations.svelte
+++ b/src/components/organisms/Locations.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
-    import { getContext } from 'svelte'
+    import { getContext, onMount } from 'svelte'
     import { flip } from 'svelte/animate'
     import { quartOut } from 'svelte/easing'
     import { send, receive } from '$animations/crossfade'
     import { throttle } from '$utils/functions'
+    import anime from 'animejs'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Location from '$components/molecules/Location.svelte'
 
     export let locations: any
 
-
     const { continents, settings: { explore_list }} = getContext('global')
+    let listEl: HTMLElement
+    let observer: IntersectionObserver
 
     // Continents filtering logic
     let currentContinent: string = undefined
@@ -36,6 +38,40 @@
             currentContinent = undefined
         }
     }, 700)
+
+
+    onMount(() => {
+        const items = listEl.querySelectorAll('li')
+        anime.set(items, { opacity: 0 })
+
+        // Init IO
+        observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    anime({
+                        targets: items,
+                        translateY: ['20%', 0],
+                        opacity: [0, 1],
+                        duration: 1200,
+                        delay: anime.stagger(100),
+                        easing: 'easeOutQuart',
+                    })
+
+                    // Run once only
+                    observer.unobserve(listEl)
+                }
+            })
+        }, {
+            threshold: 0.3,
+            rootMargin: '0px 0px 0px'
+        })
+        observer.observe(listEl)
+
+        // Destroy
+        return () => {
+
+        }
+    })
 </script>
 
 <div class="browse" id="locations">
@@ -54,7 +90,7 @@
         {/each}
     </ul>
 
-    <ul class="browse__locations" role="list">
+    <ul class="browse__locations" bind:this={listEl}>
         {#each filteredLocations as location (location)}
             <li
                 animate:flip={{ duration: 1000, easing: quartOut }}