solid-spring is a spring-physics first animation library for SolidJS based on react-spring/core.
This an experimental project that was made to be submitted in hack.solidjs.com, feel free to create github ticket
The API looks like this:
conststyles=createSpring({from: {opacity: 0},to: {opacity: 1}})<animated.divstyle={styles()}/>The API is similar to what we have in react-spring, with small differences to make the library compatible with SolidJS
Click on the below gifs for exploring the code of each preview (ported from Poimandres examples).
npm install solid-springHello (opacity animation)
Svg (animating svg elements)
Numbers (non style use case)
Turns values into animated-values.
import{createSpring,animated}from"solid-spring";functionChainExample(){conststyles=createSpring({loop: true,to: [{opacity: 1,color: '#ffaaee'},{opacity: 0,color: 'rgb(14,26,19)'},],from: {opacity: 0,color: 'red'},})return<animated.divstyle={styles()}>I will fade in and out</animated.div>}createSpring also takes a function in case you want to pass a reactive value as a style!
const[disabled,setDisabled]=createSignal(false)conststyles=createSpring(()=>({pause: disabled(),}))Creates multiple springs, each with its own config. Use it for static lists, etc.
Similar to useSprings in react-spring, It takes number or a function that returns a number (for reactivity) as the first argument, and a list of springs or a function that returns a spring as the second argument.
functioncreateSprings<PropsextendsCreateSpringsProps>(
lengthFn: number | (() =>number),props: Props[]&CreateSpringsProps<PickAnimated<Props>>[]): Accessor<SpringValues<PickAnimated<Props>>[]>&{ref: SpringRefType<PickAnimated<Props>>;};functioncreateSprings<PropsextendsCreateSpringsProps>(
lengthFn: number | (() =>number),props: (i: number,ctrl: Controller)=>Props): Accessor<SpringValues<PickAnimated<Props>>[]>&{ref: SpringRefType<PickAnimated<Props>>;};