@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
57 lines (56 loc) • 1.85 kB
TypeScript
/**
* Inertia → spring handoff utilities (axis-only, pure, testable).
*
* Implements exponential velocity decay until crossing a bound, then hands off
* to a damped spring targeting the nearest boundary. If out-of-bounds at t=0,
* spring starts immediately.
*
* This module is SSR-safe and holds no references to the DOM or timers.
*/
/** Current position and velocity on a single axis. */
export type AxisState = {
value: number;
velocity: number;
};
/** Min/max boundary pair for clamping an axis. */
export type Bounds = {
min: number;
max: number;
};
/**
* Parameters controlling the inertia decay and boundary spring phases.
*
* @see deriveBoundaryPhysics
*/
export type InertiaHandoffOptions = {
timeConstantMs: number;
restDelta: number;
restSpeed: number;
bounceStiffness: number;
bounceDamping: number;
};
/** Value returned by each step of the inertia/spring simulation. */
export type StepResult = {
value: number;
done: boolean;
};
/**
* Create a stepper that yields a value at each elapsed time. Handoff from
* inertia to spring when crossing the bounds.
*
* @param initial Starting position and velocity on the axis.
* @param bounds Min/max boundaries for the axis.
* @param opts Physics parameters for decay and boundary spring.
* @returns A function that accepts elapsed time in ms and returns the current `StepResult`.
*
* @example
* ```ts
* const step = createInertiaToBoundary(
* { value: 50, velocity: 200 },
* { min: 0, max: 300 },
* { timeConstantMs: 350, restDelta: 0.5, restSpeed: 10, bounceStiffness: 500, bounceDamping: 25 }
* )
* const { value, done } = step(16) // advance 16 ms
* ```
*/
export declare const createInertiaToBoundary: (initial: AxisState, bounds: Bounds, opts: InertiaHandoffOptions) => ((tMs: number) => StepResult);