[wip] Switch from Anime to Motion One for page animations

src/components/molecules/PhotoCard.svelte

@@ -33,28 +33,30 @@
     on:blur={() => sendHover(false)}
 >
     {#if url}
-        <a href={url} sveltekit:noscroll>
-            <Image
-                {id}
-                sizeKey="postcard"
-                {sizes}
-                ratio={1.5}
-                {alt}
-                {lazy}
-            />
-            {#if title && location}
-                <div class="photo-card__info">
-                    <Image
-                        id={location.country.flag.id}
-                        sizeKey="square-small"
-                        width={24}
-                        height={24}
-                        alt="Flag of {location.country.name}"
-                    />
-                    <p>{title} - {city ? `${city}, ` : ''}{location.name}, {location.country.name}</p>
-                </div>
-            {/if}
-        </a>
+        <div class="photo-card__content">
+            <a href={url} sveltekit:noscroll>
+                <Image
+                    {id}
+                    sizeKey="postcard"
+                    {sizes}
+                    ratio={1.5}
+                    {alt}
+                    {lazy}
+                />
+                {#if title && location}
+                    <div class="photo-card__info">
+                        <Image
+                            id={location.country.flag.id}
+                            sizeKey="square-small"
+                            width={24}
+                            height={24}
+                            alt="Flag of {location.country.name}"
+                        />
+                        <p>{title} - {city ? `${city}, ` : ''}{location.name}, {location.country.name}</p>
+                    </div>
+                {/if}
+            </a>
+        </div>
     {:else}
         <Image
             {id}

src/components/organisms/Locations.svelte

@@ -6,7 +6,7 @@
     import { getContext } from 'svelte'
     import { flip } from 'svelte/animate'
     import { quartOut } from 'svelte/easing'
-    import { reveal, fly } from '$animations/index'
+    import reveal from '$animations/reveal'
     import { send, receive } from '$animations/crossfade'
     import { throttle } from '$utils/functions'
     import { sendEvent } from '$utils/analytics'
@@ -67,14 +67,13 @@
 
     <ul class="browse__locations"
         use:reveal={{
-            animation: fly,
+            children: '.location',
+            animation: { y: ['20%', 0], opacity: [0, 1] },
             options: {
-                children: 'li',
-                stagger: 100,
-                duration: 1200,
-                from: '20%',
+                stagger: 0.105,
+                duration: 1,
+                threshold: 0.3,
             },
-            threshold: 0.3,
         }}
     >
         {#each filteredLocations as location (location)}