From c618141f51cc5b3b70e58e79b09757c369714723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 21 Nov 2021 13:51:11 +0100
Subject: [PATCH] Use reveal function to animate Locations items

---
 src/components/organisms/Locations.svelte | 54 ++++++-----------------
 1 file changed, 14 insertions(+), 40 deletions(-)

diff --git a/src/components/organisms/Locations.svelte b/src/components/organisms/Locations.svelte
index a8b17c3..16b2710 100644
--- a/src/components/organisms/Locations.svelte
+++ b/src/components/organisms/Locations.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { getContext, onMount } from 'svelte'
+    import { getContext } 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'
+    import { reveal, fly } from '$animations/index'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Location from '$components/molecules/Location.svelte'
@@ -12,8 +12,6 @@
     export let locations: any
 
     const { continents, settings: { explore_list }} = getContext('global')
-    let listEl: HTMLElement
-    let observer: IntersectionObserver
 
     // Continents filtering logic
     let currentContinent: string = undefined
@@ -38,41 +36,6 @@
             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 () => {
-            observer.disconnect()
-        }
-    })
 </script>
 
 <div class="browse" id="locations">
@@ -91,7 +54,18 @@
         {/each}
     </ul>
 
-    <ul class="browse__locations" bind:this={listEl}>
+    <ul class="browse__locations"
+        use:reveal={{
+            animation: fly,
+            options: {
+                children: 'li',
+                stagger: 100,
+                duration: 1200,
+                from: '20%',
+            },
+            threshold: 0.3,
+        }}
+    >
         {#each filteredLocations as location (location)}
             <li
                 animate:flip={{ duration: 1000, easing: quartOut }}