From dc1ae9c0a1d4f49115d1c34586e052a5e40dde10 Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Fri, 29 Nov 2024 11:32:43 +1100 Subject: [PATCH] feat(animations): migrate to motion-one@11 --- package.json | 2 +- src/SEQTA.ts | 68 ++-- src/interface/components/ColourPicker.svelte | 18 +- src/interface/components/MotionDiv.svelte | 30 +- src/interface/components/Switch.svelte | 6 +- .../components/store/ThemeModal.svelte | 14 +- ...timestamp-1731648335376-74d7c6bd758ba8.mjs | 330 ------------------ 7 files changed, 83 insertions(+), 385 deletions(-) delete mode 100644 vite.config.ts.timestamp-1731648335376-74d7c6bd758ba8.mjs diff --git a/package.json b/package.json index 417ca1bd..56d6d2ce 100644 --- a/package.json +++ b/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", diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 682fd2d1..1c916a6b 100644 --- a/src/SEQTA.ts +++ b/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 { { 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 { { 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 { { 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 { '.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 } ) } diff --git a/src/interface/components/ColourPicker.svelte b/src/interface/components/ColourPicker.svelte index 02db3683..fde37b7f 100644 --- a/src/interface/components/ColourPicker.svelte +++ b/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) => { diff --git a/src/interface/components/MotionDiv.svelte b/src/interface/components/MotionDiv.svelte index b9d6802f..1aca4896 100644 --- a/src/interface/components/MotionDiv.svelte +++ b/src/interface/components/MotionDiv.svelte @@ -1,6 +1,6 @@