@humanspeak/svelte-motion
Version:
Framer Motion for Svelte 5. Declarative motion.<tag> components with AnimatePresence exit animations, gestures (hover, tap, drag, focus, in-view), variants, FLIP layout animations, shared-layout transitions, spring physics, and scroll-linked motion values
54 lines (53 loc) • 2.55 kB
TypeScript
import { type Readable } from 'svelte/store';
import { type AugmentedMotionValue } from './augmentMotionValue.svelte.js';
/**
* Input to {@link useMotionTemplate}'s interpolation slots: a motion-dom
* `MotionValue`, a Svelte readable, or a plain `number` / `string` literal.
* Mirrors framer-motion's `useMotionTemplate` signature.
*/
export type MotionTemplateInput = AugmentedMotionValue<number | string> | Readable<number | string> | number | string;
/**
* Tagged template literal that builds an augmented `MotionValue<string>`
* from interpolated motion values, Svelte readables, and plain literals.
*
* Mirrors framer-motion 1:1: returns a real motion-dom `MotionValue<string>`
* (via `transformValue`) that auto-tracks every `MotionValue.get()` called
* during template composition. Whenever any tracked input emits, the
* composer reruns and writes the new string into the result value.
*
* Svelte-readable slots are sampled via `svelte/store`'s `get()` inside the
* composer so they re-emit when adjacent motion values trigger a recompute.
* Plain `number` / `string` slots are stringified inline.
*
* The result is augmented with a `$state`-backed `.current` getter and a
* Svelte readable `.subscribe` shim so it composes with the rest of the
* Tier 2 surface and reads reactively in Svelte 5 scopes.
*
* Lifecycle: must be called during component initialization. motion-dom
* cleans up the change-subscriptions when the result `MotionValue` is
* destroyed; we wire that destroy to the surrounding `$effect`.
*
* SSR-safe: motion-dom's `transformValue` works without DOM access (no
* timers, no listeners). On the server the result is a static augmented
* motion value with no `$effect` registered.
*
* @param strings Static template string parts (supplied by the tagged-template syntax).
* @param values Interpolated motion values, Svelte readables, or literals.
* @returns An `AugmentedMotionValue<string>` with the composed template.
*
* @example
* ```svelte
* <script>
* import { useSpring, useTransform, useMotionTemplate } from '@humanspeak/svelte-motion'
*
* const x = useSpring(0)
* const blur = useTransform(x, [-100, 0, 100], [10, 0, 10])
* const filter = useMotionTemplate`blur(${blur}px)`
* </script>
*
* <div style="filter: {filter.current}">Animated blur</div>
* ```
*
* @see https://motion.dev/docs/react-use-motion-template
*/
export declare const useMotionTemplate: (strings: TemplateStringsArray, ...values: MotionTemplateInput[]) => AugmentedMotionValue<string>;