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

src/routes/index.svelte

@@ -5,10 +5,11 @@
 <script lang="ts">
     import { page } from '$app/stores'
     import { getContext, onMount } from 'svelte'
-    import anime, { type AnimeTimelineInstance } from 'animejs'
+    import { timeline, stagger } from 'motion'
     import { DELAY } from '$utils/contants'
-    import { sleep, smoothScroll } from '$utils/functions'
+    import { smoothScroll } from '$utils/functions'
     import { reveal, fade as animeFade } from '$animations/index'
+    import { quartOut } from '$animations/easings'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -30,36 +31,42 @@
     const { settings, locations }: any = getContext('global')
 
     let scrollY: number, innerHeight: number
-    let timeline: AnimeTimelineInstance
 
 
     onMount(() => {
-        timeline = anime.timeline({
-            duration: 1600,
-            easing: 'easeOutQuart',
-            autoplay: false,
-        })
+        /**
+         * Animations
+         */
+        const animation = timeline([
+            // Reveal text
+            ['.homepage__headline', {
+                y: [16, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.75,
+            }],
 
-        // Reveal text
-        timeline.add({
-            targets: '.homepage__headline',
-            translateY: [16, 0],
-            opacity: [0, 1],
-        }, 750)
-
-        // Animate collage photos
-        timeline.add({
-            targets: '.collage .photo-card',
-            translateY: ['33.33%', 0],
-            rotate (item: HTMLElement) {
-                return [-4, getComputedStyle(item).getPropertyValue('--rotation')]
+            // Animate collage photos
+            ['.collage .photo-card', {
+                y: ['33.33%', 0],
+                rotate: [-4, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0,
+                duration: 1.2,
+                delay: stagger(0.075),
+            }]
+        ], {
+            delay: DELAY.PAGE_LOADING / 1000,
+            defaultOptions: {
+                duration: 1.6,
+                easing: quartOut,
             },
-            opacity: [0, 1],
-            duration: 1200,
-            delay: anime.stagger(75),
-        }, 0)
+        })
+        animation.stop()
 
-        sleep(DELAY.PAGE_LOADING).then(timeline.play)
+        // Run animation
+        requestAnimationFrame(animation.play)
     })
 </script>