solid-spring

A port of react-spring, for SolidJS

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

Preview

Click on the below gifs for exploring the code of each preview (ported from Poimandres examples).

Install

npm install solid-spring

Examples

Hello (opacity animation)
Svg (animating svg elements)
Numbers (non style use case)

API

createSpring

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(),
}))

createSprings

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