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:
const styles = createSpring({
from: {
opacity: 0
},
to: {
opacity: 1
}
})
<animated.div style={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-spring
Hello (opacity animation)
Svg (animating svg elements)
Numbers (non style use case)
Turns values into animated-values.
import { createSpring, animated } from "solid-spring";
function ChainExample() {
const styles = createSpring({
loop: true,
to: [
{ opacity: 1, color: '#ffaaee' },
{ opacity: 0, color: 'rgb(14,26,19)' },
],
from: { opacity: 0, color: 'red' },
})
return <animated.div style={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)
const styles = 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.
function createSprings<Props extends CreateSpringsProps>(
lengthFn: number | (() => number),
props: Props[] & CreateSpringsProps<PickAnimated<Props>>[]
): Accessor<SpringValues<PickAnimated<Props>>[]> & {
ref: SpringRefType<PickAnimated<Props>>;
};
function createSprings<Props extends CreateSpringsProps>(
lengthFn: number | (() => number),
props: (i: number, ctrl: Controller) => Props
): Accessor<SpringValues<PickAnimated<Props>>[]> & {
ref: SpringRefType<PickAnimated<Props>>;
};