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

src/routes/[country]/[location]/index.svelte

@@ -3,14 +3,15 @@
 </style>
 
 <script lang="ts">
-    import { navigating, page } from '$app/stores'
+    import { page, navigating } from '$app/stores'
     import { onMount } from 'svelte'
-    import anime, { type AnimeTimelineInstance } from 'animejs'
+    import { timeline } from 'motion'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
     import { getAssetUrlKey } from '$utils/helpers'
+    import { quartOut } from '$animations/easings'
     import { fetchAPI } from '$utils/api'
-    import { DURATION } from '$utils/contants'
+    import { DELAY, DURATION } from '$utils/contants'
     import { photoFields } from '.'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -146,43 +147,51 @@
         /**
          * Animations
          */
-        // Transition in
-        const timeline: AnimeTimelineInstance = anime.timeline({
-            duration: 1600,
-            easing: 'easeOutQuart',
-            autoplay: false,
+        const animationDelay = $navigating ? DURATION.PAGE_IN : 0
+        const animation = timeline([
+            // Title word
+            ['.location-page__intro .word', {
+                y: ['110%', 0],
+            }, {
+                at: 0.2 + animationDelay,
+            }],
+
+            // Illustration
+            ['.location-page__illustration', {
+                scale: [1.06, 1],
+                opacity: [0, 1],
+            }, {
+                at: 0.4 + animationDelay,
+                duration: 2.4,
+            }],
+
+            // Title of
+            ['.location-page__intro .of', {
+                opacity: [0, 1],
+            }, {
+                at: 0.95 + animationDelay,
+                duration: 1.2,
+            }],
+
+            // Description
+            ['.location-page__description', {
+                y: ['10%', 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.9 + animationDelay,
+                duration: 1.2,
+            }]
+        ], {
+            delay: DELAY.PAGE_LOADING / 1000,
+            defaultOptions: {
+                duration: 1.6,
+                easing: quartOut,
+            },
         })
+        animation.stop()
 
-        // Title word
-        timeline.add({
-            targets: '.location-page__intro .word',
-            translateY: ['110%', 0],
-            delay: anime.stagger(200)
-        }, 200 + ($navigating ? DURATION.PAGE_IN : 0))
-
-        // Illustration
-        timeline.add({
-            targets: '.location-page__illustration',
-            scale: [1.06, 1],
-            opacity: [0, 1],
-            duration: 2400,
-        }, 400 + ($navigating ? DURATION.PAGE_IN : 0))
-
-        // Title of
-        timeline.add({
-            targets: '.location-page__intro .of',
-            opacity: [0, 1],
-            duration: 1200,
-        }, 950 + ($navigating ? DURATION.PAGE_IN : 0))
-
-        // Description
-        timeline.add({
-            targets: '.location-page__description',
-            translateY: ['10%', 0],
-            opacity: [0, 1],
-        }, 900 + ($navigating ? DURATION.PAGE_IN : 0))
-
-        requestAnimationFrame(timeline.play)
+        // Run animation
+        requestAnimationFrame(animation.play)
 
 
         // Destroy