Skip to content

Blankeos/spring-solid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

9 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Solid Primitives spring

spring-solid

solidjs.spring.primitive.-.demo.mp4

turborepo size version stage

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, default 0.15) โ€” a value between 0 and 1 where higher means a 'tighter' spring
  • damping (number, default 0.8) โ€” a value between 0 and 1 where lower means a 'springier' spring
  • precision (number, default 0.01) โ€” determines the threshold at which the spring is considered to have 'settled', where lower means more precise

Installation

npm install spring-solid
# or
yarn add spring-solid
# or
pnpm add spring-solid
# or
bun add spring-solid

Quick Start

// 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 });

Demo

Changelog

See CHANGELOG.md

Note

Since my PR for solid-primitives might not get reviewed, I'm self-releasing this port on my own. Ideally this would become @solid-primitives/spring. Hope you like it anyway!

About

๐Ÿ’™ createSpring primitive for SolidJS

Resources

License

Stars

Watchers

Forks

Packages

No packages published