✨ Finish to replace Anime with Motion One for page animations

Page intro animation and reveal that has now been simplified as Motion One manages an inView option (that uses IntersectionObserver)

src/components/organisms/ShopHeader.svelte

@@ -3,10 +3,13 @@
 </style>
 
 <script lang="ts">
+    import { navigating } from '$app/stores'
     import { getContext, onMount } from 'svelte'
-    import anime, { type AnimeTimelineInstance } from 'animejs'
+    import { stagger, timeline } from 'motion'
     import { cartOpen } from '$utils/stores/shop'
     import { smoothScroll } from '$utils/functions'
+    import { DELAY } from '$utils/contants'
+    import { quartOut } from '$animations/easings'
     // Components
     import Image from '$components/atoms/Image.svelte'
     import ButtonCart from '$components/atoms/ButtonCart.svelte'
@@ -37,46 +40,52 @@
         /**
          * Animations
          */
-        // Setup animations
-        const timeline: AnimeTimelineInstance = anime.timeline({
-            duration: 1600,
-            easing: 'easeOutQuart',
-            autoplay: false,
+        const animation = timeline([
+            // Hero image
+            ['.shop-page__background', {
+                scale: [1.06, 1],
+                opacity: [0, 1],
+            }, {
+                at: 0.4,
+                duration: 2.4,
+            }],
+
+            // Intro top elements
+            ['.shop-page__intro .top > *', {
+                y: [-100, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.4,
+                delay: stagger(0.25),
+            }],
+
+            // Hero title
+            ['.shop-page__title h1', {
+                y: [32, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.5,
+            }],
+
+            // Intro navbar
+            ['.shop-page__nav .container > *, .shop-page__intro .button-cart', {
+                y: [100, 0],
+                opacity: [0, 1],
+            }, {
+                at: 0.7,
+                delay: stagger(0.25),
+            }]
+        ], {
+            delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
+            defaultOptions: {
+                duration: 1.6,
+                easing: quartOut,
+            },
         })
+        animation.stop()
 
-        // Hero image
-        timeline.add({
-            targets: '.shop-page__background',
-            scale: [1.06, 1],
-            opacity: [0, 1],
-            duration: 2400,
-        }, 400)
-
-        // Hero title
-        timeline.add({
-            targets: '.shop-page__title h1',
-            translateY: [32, 0],
-            opacity: [0, 1],
-        }, 500)
-
-        // Intro top elements
-        timeline.add({
-            targets: '.shop-page__intro .top > *',
-            translateY: [-100, 0],
-            delay: anime.stagger(250),
-        }, 400)
-
-        // Intro navbar
-        timeline.add({
-            targets: '.shop-page__nav .container > *, .shop-page__intro .button-cart',
-            opacity: [0, 1],
-            translateY: [100, 0],
-            translateZ: 0,
-            delay: anime.stagger(250),
-        }, 700)
-
-        // Transition in
-        requestAnimationFrame(timeline.play)
+        // Run animation
+        requestAnimationFrame(animation.play)
 
 
         // Destroy