@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
55 lines (54 loc) • 2.18 kB
TypeScript
/**
* Linearly interpolates between `from` and `to` by `t` [0,1].
* Preserves float precision.
*/
export declare const mixNumber: (from: number, to: number, t: number) => number;
/** Range with optional min/max boundaries for constraining a point. */
export type ConstraintRange = {
min?: number;
max?: number;
};
/** Per-side elastic factors, a uniform factor, or `undefined` for no elasticity. */
export type ConstraintElastic = {
min: number;
max: number;
} | number | undefined;
/**
* Apply float-safe constraints with optional elastic mixing.
* Mirrors Framer Motion behavior: clamp via Math.min/Math.max with no rounding.
* If `elastic` provided, blends toward the bound using its side-specific factor.
*
* @param point The unconstrained value to clamp.
* @param range Min/max boundaries. Either or both may be omitted.
* @param elastic Optional per-side elastic factor(s) in [0,1]. When provided,
* the value is interpolated toward the boundary instead of hard-clamped.
* @returns The constrained (and optionally elastically blended) value.
*
* @example
* ```ts
* // Hard clamp to [0, 100]
* applyConstraints(120, { min: 0, max: 100 }) // 100
*
* // Elastic overshoot (50 % blend toward max)
* applyConstraints(120, { min: 0, max: 100 }, 0.5) // 110
* ```
*/
export declare const applyConstraints: (point: number, range: ConstraintRange, elastic?: ConstraintElastic) => number;
/**
* Parse a CSS `matrix(a, b, c, d, tx, ty)` string into translate components.
*
* Used to read the rendered translate after Motion writes inline transforms
* during drag-cancel hooks.
*
* @param transform The computed `transform` style — typically `'none'` or
* `'matrix(1, 0, 0, 1, 10, 20)'`. `matrix3d(...)` is not supported.
* @returns The 2D translate components `{ tx, ty }`. Defaults to
* `{ tx: 0, ty: 0 }` for `'none'` or any non-matching input.
* @example
* parseMatrixTranslate('matrix(1, 0, 0, 1, 10, 20)') // → { tx: 10, ty: 20 }
* parseMatrixTranslate('none') // → { tx: 0, ty: 0 }
*/
export declare const parseMatrixTranslate: (transform: string) => {
tx: number;
ty: number;
};