A small SolidJS hook to interpolate signal changes with spring physics. Inspired by & directly forked from svelte-motion/spring
as such, has a very familiar API design.
With this primitive, you can easily animate values that can be interpolated like number
, date
, and collections (arrays or nested objects) of those datatypes.
-
createSpring
- Provides a getter and setter for the spring primitive. -
createDerivedSpring
- Provides only a getter for the spring primitive deriving from an accessor parameter. Similar to the @solid-primitives/tween API.
The following physics options are available:
-
stiffness
(number, default0.15
) — a value between 0 and 1 where higher means a 'tighter' spring -
damping
(number, default0.8
) — a value between 0 and 1 where lower means a 'springier' spring -
precision
(number, default0.01
) — determines the threshold at which the spring is considered to have 'settled', where lower means more precise
npm install @solid-primitives/spring
# or
yarn add @solid-primitives/spring
# or
pnpm add @solid-primitives/spring
// Basic Example
const [progress, setProgress] = createSpring(0);
// Example with options (less sudden movement)
const [radialProgress, setRadialProgress] = createSpring(0, { stiffness: 0.05 });
// Example with collections (e.g. Object or Array).
const [xy, setXY] = createSpring(
{ x: 50, y: 50 },
{ stiffness: 0.08, damping: 0.2, precision: 0.01 },
);
// Example deriving from an existing signal.
const [myNumber, myNumber] = createSignal(20);
const springedValue = createDerivedSpring(myNumber, { stiffness: 0.03 });
See CHANGELOG.md