feat(animations): migrate to motion-one@11

src/interface/components/ColourPicker.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte'
   import ColourPicker from './ColourPicker.tsx';
   import ReactAdapter from './utils/ReactAdapter.svelte';
-  import { animate, spring } from 'motion';
+  import { animate } from 'motion';
   import { delay } from '@/seqta/utils/delay.ts'
 
   const { hidePicker, standalone = false, savePresets = true, customOnChange = null, customState = null } = $props<{
@@ -23,13 +23,17 @@
     animate(
       content,
       { scale: [1, 0.4], opacity: [1, 0] },
-      { easing: spring({ stiffness: 400, damping: 30 }) }
+      {
+        type: 'spring',
+        stiffness: 400,
+        damping: 30
+      }
     );
 
     animate(
       background,
       { opacity: [1, 0] },
-      { easing: [0.4, 0, 0.2, 1] }
+      { ease: [0.4, 0, 0.2, 1] }
     );
 
     await delay(400);
@@ -43,13 +47,17 @@
     animate(
       background,
       { opacity: [0, 1] },
-      { duration: 0.3, easing: [0.4, 0, 0.2, 1] }
+      { duration: 0.3, ease: [0.4, 0, 0.2, 1] }
     );
 
     animate(
       content,
       { scale: [0.4, 1], opacity: [0, 1] },
-      { easing: spring({ stiffness: 400, damping: 30 }) }
+      {
+        type: 'spring',
+        stiffness: 400,
+        damping: 30
+      }
     );
 
     const handleEscapeKey = (e: KeyboardEvent) => {

src/interface/components/MotionDiv.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-  import { animate as motionAnimate, spring } from 'motion';
+  import { onMount, onDestroy } from 'svelte';
+  import { animate as motionAnimate } from 'motion';
 
   let { initial, animate, exit, transition, children, class: className } = $props<{ 
     initial?: any, 
@@ -12,11 +12,9 @@
   }>();
 
   let divElement: HTMLElement;
-  const dispatch = createEventDispatcher();
 
   const playAnimation = (keyframe: any) => {
     if (divElement && keyframe) {
-      let animationOptions = transition;
       let finalKeyframe = { ...keyframe };
 
       if (finalKeyframe.height === 'auto') {
@@ -36,16 +34,18 @@
         finalKeyframe.height = `${autoHeight}px`;
       }
 
-      if (!transition || transition.type === 'spring') {
-        const springConfig = transition?.config || { stiffness: 250, damping: 25 };
-        animationOptions = {
-          ...transition,
-          easing: spring(springConfig)
-        };
-      }
+      const defaultSpringConfig = { stiffness: 250, damping: 25 };
 
-      const animation = motionAnimate(divElement, finalKeyframe, animationOptions);
-      return animation.finished;
+      const animation = motionAnimate(
+        [divElement],
+        finalKeyframe,
+        {
+          type: 'spring',
+          stiffness: transition?.stiffness || defaultSpringConfig.stiffness,
+          damping: transition?.damping || defaultSpringConfig.damping
+        }
+      );
+      return animation;
     }
     return Promise.resolve();
   };
@@ -57,16 +57,12 @@
     } else if (animate) {
       await playAnimation(animate);
     }
-
-    dispatch('animationend');
   });
   
   $effect(() => {
     if (animate) {
       playAnimation(animate);
     }
-
-    dispatch('animationend');
   });
 
   onDestroy(async () => {

src/interface/components/Switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { animate, spring } from 'motion';
+  import { animate } from 'motion';
   import { standalone } from '../utils/standalone.svelte'
 
   let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
@@ -18,7 +18,9 @@
         x: enabled ? (standalone.standalone ? 24 : 20) : 0,
       },
       {
-        easing: spring(springParams),
+        type: 'spring',
+        stiffness: springParams.stiffness,
+        damping: springParams.damping,
       }
     );
   };

src/interface/components/store/ThemeModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Theme } from '@/interface/types/Theme'
   import { fade } from 'svelte/transition';
-  import { animate, spring } from 'motion';
+  import { animate } from 'motion';
 
   let { theme, currentThemes, setDisplayTheme, onInstall, onRemove, allThemes, displayTheme } = $props<{
     theme: Theme | null;
@@ -28,7 +28,11 @@
       animate(
         modalElement,
         { y: [500, 0], opacity: [0, 1] },
-        { easing: spring({ stiffness: 150, damping: 20 }) }
+        {
+          type: 'spring',
+          stiffness: 150,
+          damping: 20
+        }
       );
     }
   });
@@ -37,7 +41,11 @@
     animate(
       modalElement,
       { y: [10, 500], opacity: [1, 0] },
-      { easing: spring({ stiffness: 150, damping: 20 }) }
+      {
+        type: 'spring',
+        stiffness: 150,
+        damping: 20
+      }
     );
     setTimeout(() => {
       setDisplayTheme(relatedTheme ?? null);