diff --git a/src/lib/animation/index.ts b/src/lib/animation/index.ts index 8e7f13b..a423a9d 100644 --- a/src/lib/animation/index.ts +++ b/src/lib/animation/index.ts @@ -1,4 +1,3 @@ -import type { EasingFunction, TransitionConfig } from "svelte/transition"; import type { AnimationConfig, FlipParams } from "svelte/animate"; import { cubicOut } from "svelte/easing"; @@ -7,129 +6,24 @@ export const transition = export const duration = 500; -const remap = ( - value: number, - low1: number, - high1: number, - low2: number, - high2: number, -) => low2 + ((high2 - low2) * (value - low1)) / (high1 - low1); +interface FadeOptions { + delay?: number; + duration?: number; + easing?: (t: number) => number; + type?: "in" | "out"; +} -const choose = ( - direction: "in" | "out" | "both", - defaultValue: number, - inValue?: number, - outValue?: number, -) => - direction !== "out" - ? typeof inValue === "number" - ? inValue - : defaultValue - : typeof outValue === "number" - ? outValue - : defaultValue; - -type Combination = `${T} ${U}`; - -export const blur = ( - _: HTMLElement, - config: - | Partial<{ - blurMultiplier: number; - duration: number; - easing: EasingFunction; - scale: { - start: number; - end: number; - }; - x: { - start: number; - end: number; - }; - y: { - start: number; - end: number; - }; - delay: number; - opacity: boolean; - origin: Combination< - "top" | "bottom" | "left" | "right" | "center", - "top" | "bottom" | "left" | "right" | "center" - > & {}; - }> - | undefined, - dir: { - direction: "in" | "out" | "both"; - }, -): TransitionConfig => { - const prefersReducedMotion = window.matchMedia( - "(prefers-reduced-motion: reduce)", - ).matches; - if (typeof config?.opacity === "undefined" && config) config.opacity = true; - const isUsingTranslate = !!config?.x || !!config?.y || !!config?.scale; - return { - delay: config?.delay || 0, - duration: prefersReducedMotion ? 0 : config?.duration || 300, - css: (t) => { - if (prefersReducedMotion) return ""; - const translate = isUsingTranslate - ? `translate(${remap( - t, - 0, - 1, - choose( - dir.direction, - 0, - config?.x?.start, - config?.x?.end, - ), - choose( - dir.direction, - 0, - config?.x?.end, - config?.x?.start, - ), - )}px, ${remap( - t, - 0, - 1, - choose( - dir.direction, - 0, - config?.y?.start, - config?.y?.end, - ), - choose( - dir.direction, - 0, - config?.y?.end, - config?.y?.start, - ), - )}px) scale(${remap( - t, - 0, - 1, - choose( - dir.direction, - 0.9, - config?.scale?.start, - config?.scale?.end, - ), - choose( - dir.direction, - 1, - config?.scale?.end, - config?.scale?.start, - ), - )})` - : ``; - return `filter: blur(${(1 - t) * (config?.blurMultiplier || 1)}px); opacity: ${config?.opacity ? t : 1}; transform: ${ - translate - }; ${config?.origin ? `transform-origin: ${config.origin};` : ""}`; - }, - easing: config?.easing, - }; -}; +export function fade( + node: HTMLElement, + { delay = 0, duration = 400, easing = cubicOut, type = "in" }: FadeOptions = {} +): AnimationConfig { + return { + delay, + duration, + easing, + css: (t) => `opacity: ${type === "in" ? t : 1 - t};`, + }; +} // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type export function is_function(thing: unknown): thing is Function { @@ -165,7 +59,7 @@ export function flip( ? duration(Math.sqrt(dx * dx + dy * dy)) : duration, easing, - css: (t, u) => { + css: (_t, u) => { const x = u * dx; const y = u * dy; // const sx = scale ? t + (u * from.width) / to.width : 1; diff --git a/src/lib/components/functional/Dropdown.svelte b/src/lib/components/functional/Dropdown.svelte index 33d2028..7daabb1 100644 --- a/src/lib/components/functional/Dropdown.svelte +++ b/src/lib/components/functional/Dropdown.svelte @@ -1,5 +1,5 @@