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

package.json

@@ -79,7 +79,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "million": "^3.1.11",
-    "motion": "^10.18.0",
+    "motion": "^11.12.0",
     "postcss": "^8.4.45",
     "publish-browser-extension": "^2.2.1",
     "react": "17",

src/SEQTA.ts

@@ -2,7 +2,7 @@
 import Color from 'color'
 import Sortable from 'sortablejs'
 import browser from 'webextension-polyfill'
-import { animate, spring, stagger } from 'motion'
+import { animate, stagger } from 'motion'
 
 // Internal utilities and functions
 import { delay } from '@/seqta/utils/delay'
@@ -329,16 +329,20 @@ export function OpenWhatsNewPopup() {
     animate(
       [popup, bkelement as HTMLElement],
       { scale: [0, 1], opacity: [0, 1] },
-      { easing: spring({ stiffness: 220, damping: 18 }) }
+      {
+        type: 'spring',
+        stiffness: 220,
+        damping: 18
+      }
     )
 
     animate(
       '.whatsnewTextContainer *',
       { opacity: [0, 1], y: [10, 0] },
       {
-        delay: stagger(0.05, { start: 0.1 }),
+        delay: stagger(0.05, { startDelay: 0.1 }),
         duration: 0.5,
-        easing: [.22, .03, .26, 1]  
+        ease: [.22, .03, .26, 1]  
       }
     )
   }
@@ -425,16 +429,20 @@ export function OpenAboutPage() {
     animate(
       [popup, bkelement as HTMLElement],
       { scale: [0, 1], opacity: [0, 1] },
-      { easing: spring({ stiffness: 220, damping: 18 }) }
+      {
+        type: 'spring',
+        stiffness: 220,
+        damping: 18
+      }
     )
 
     animate(
       '.whatsnewTextContainer *',
       { opacity: [0, 1], y: [10, 0] },
       {
-        delay: stagger(0.05, { start: 0.1 }),
+        delay: stagger(0.05, { startDelay: 0.1 }),
         duration: 0.5,
-        easing: [.22, .03, .26, 1]  
+        ease: [.22, .03, .26, 1]  
       }
     )
   }
@@ -486,8 +494,8 @@ async function DeleteWhatsNew() {
   animate(
     [popup, bkelement!],
     { opacity: [1, 0], scale: [1, 0] },
-    { easing: [.22, .03, .26, 1] }
-  ).finished.then(() => {
+    { ease: [.22, .03, .26, 1] }
+  ).then(() => {
     bkelement?.remove()
   }); 
 }
@@ -802,7 +810,7 @@ async function handleMessages(node: Element): Promise<void> {
     {
       delay: stagger(0.05),
       duration: 0.5,
-      easing: [.22, .03, .26, 1]
+      ease: [.22, .03, .26, 1]
     }
   );
 
@@ -825,7 +833,7 @@ async function handleDashboard(node: Element): Promise<void> {
     {
       delay: stagger(0.1),
       duration: 0.5,
-      easing: [.22, .03, .26, 1]
+      ease: [.22, .03, .26, 1]
     }
   );
 
@@ -843,7 +851,7 @@ async function handleDocuments(node: Element): Promise<void> {
     {
       delay: stagger(0.05),
       duration: 0.5,
-      easing: [.22, .03, .26, 1]
+      ease: [.22, .03, .26, 1]
     }
   );
 }
@@ -857,9 +865,9 @@ async function handleReports(node: Element): Promise<void> {
     '.reports .item',
     { opacity: [0, 1], y: [10, 0] },
     {
-      delay: stagger(0.05, { start: 0.2 }),
+      delay: stagger(0.05, { startDelay: 0.2 }),
       duration: 0.5,
-      easing: [.22, .03, .26, 1]
+      ease: [.22, .03, .26, 1]
     }
   );
 }
@@ -1052,10 +1060,15 @@ export const closeExtensionPopup = (extensionPopup?: HTMLElement) => {
 
   extensionPopup.classList.add('hide')
   if (settingsState.animations) {
-    animate((progress) => {
-      extensionPopup.style.opacity = Math.max(0, 1 - progress).toString()
-      extensionPopup.style.transform = `scale(${Math.max(0, 1 - progress)})`
-    }, { easing: spring({ stiffness: 520, damping: 20 }) })
+    animate(1, 0, {
+      onUpdate: (progress) => {
+        extensionPopup.style.opacity = Math.max(0, progress).toString()
+        extensionPopup.style.transform = `scale(${Math.max(0, progress)})`
+      },
+      type: 'spring',
+      stiffness: 520,
+      damping: 20
+    });
   } else {
     extensionPopup.style.opacity = '0'
     extensionPopup.style.transform = 'scale(0)'
@@ -1329,10 +1342,15 @@ export function setupSettingsButton() {
       closeExtensionPopup(extensionPopup as HTMLElement);
     } else {
       if (settingsState.animations) {
-        animate((progress) => {
-          extensionPopup!.style.opacity = progress.toString()
-          extensionPopup!.style.transform = `scale(${progress})`
-        }, { easing: spring({ stiffness: 280, damping: 20 }) });
+        animate(0, 1, {
+          onUpdate: (progress) => {
+            extensionPopup!.style.opacity = progress.toString()
+            extensionPopup!.style.transform = `scale(${progress})`
+          },
+          type: 'spring',
+          stiffness: 280,
+          damping: 20
+        });
 
       } else {
         extensionPopup!.style.opacity = '1'
@@ -2280,11 +2298,7 @@ export async function loadHomePage() {
     animate(
       '.home-container > div',
       { opacity: [0, 1], y: [10, 0] },
-      {
-        delay: stagger(0.2, { start: 0 }),
-        duration: 0.6,
-        easing: [.22, .03, .26, 1]  
-      }
+      { delay: stagger(0.2), startTime: 0 }
     )
   }
 

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);