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

src/routes/photos.svelte

@@ -7,11 +7,13 @@
     import { goto } from '$app/navigation'
     import { getContext, onMount } from 'svelte'
     import { fly } from 'svelte/transition'
-    import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
+    import { quartOut as quartOutSvelte } from 'svelte/easing'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
-    import anime, { type AnimeTimelineInstance } from 'animejs'
+    import { stagger, timeline } from 'motion'
+    import { DELAY } from '$utils/contants'
     import { fetchAPI } from '$utils/api'
+    import { quartOut } from '$animations/easings'
     import { map, lerp, throttle } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -282,37 +284,30 @@
         const existingPhotos = photosGridEl.querySelectorAll('.photo')
         existingPhotos.forEach(el => observerPhotos.observe(el))
 
+
         /**
          * Animations
          */
-        // Transition in
-        const timeline: AnimeTimelineInstance = anime.timeline({
-            duration: 1600,
-            easing: 'easeOutQuart',
-            autoplay: false,
+        const animation = timeline([
+            // Reveal text
+            ['.photos-page__intro .discover, .photos-page__intro .filters__bar', {
+                y: [16, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.4,
+                delay: stagger(0.25),
+            }]
+        ], {
+            delay: DELAY.PAGE_LOADING / 1000,
+            defaultOptions: {
+                duration: 1.6,
+                easing: quartOut,
+            },
         })
+        animation.stop()
 
-        // Reveal text
-        timeline.add({
-            targets: '.photos-page__intro .discover',
-            translateY: [16, 0],
-            opacity: [0, 1],
-        }, 900)
-
-        // Filters
-        timeline.add({
-            targets: '.photos-page__intro .filters',
-            translateY: [16, 0],
-            opacity: [0, 1],
-            complete ({ animatables }) {
-                const element = animatables[0].target
-                // Remove style to not interfere with CSS when scrolling back up over photos
-                element.removeAttribute('style')
-            }
-        }, 1300)
-
-        // Play animation
-        requestAnimationFrame(timeline.play)
+        // Run animation
+        requestAnimationFrame(animation.play)
 
 
         // Destroy
@@ -351,9 +346,8 @@
             class:is-transitioning={filtersTransitioning}
             class:is-visible={filtersVisible}
         >
-            <span class="text-label filters__label">Filter photos</span>
-
             <div class="filters__bar">
+                <span class="text-label filters__label">Filter photos</span>
                 <ul>
                     <li>
                         <Select
@@ -418,7 +412,7 @@
                 {#if filtered}
                     <button class="reset button-link"
                         on:click={resetFiltered}
-                        transition:fly={{ y: 4, duration: 600, easing: quartOut }}
+                        transition:fly={{ y: 4, duration: 600, easing: quartOutSvelte }}
                     >
                         Reset
                     </button>