https://github.com/solidjs-community/solid-spring

Like react-spring, but for SolidJS.
https://github.com/solidjs-community/solid-spring

animation react-spring solidjs spring

Last synced: about 1 month ago
JSON representation

Like react-spring, but for SolidJS.

• Host: GitHub
• URL: https://github.com/solidjs-community/solid-spring
• Owner: solidjs-community
• License: mit
• Created: 2022-02-07T12:47:30.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-03T23:33:54.000Z (10 months ago)
• Last Synced: 2024-10-29T18:05:54.118Z (about 2 months ago)
• Topics: animation, react-spring, solidjs, spring
• Language: TypeScript
• Homepage:
• Size: 242 KB
• Stars: 83
• Watchers: 6
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Solid Spring

README

        

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:

```jsx

const styles = createSpring({

  from: {

    opacity: 0

  },

  to: {

    opacity: 1

  }

})

```

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

```shell

npm install solid-spring

```

## Examples

[Hello (opacity animation)](https://codesandbox.io/s/hello-qe3eq5?file=/index.tsx)




[Svg (animating svg elements)](https://codesandbox.io/s/svg-omnp4c?file=/index.tsx)




[Numbers (non style use case)](https://codesandbox.io/s/numbers-kbc57h?file=/index.tsx)

## API

### `createSpring`

> Turns values into animated-values.

```jsx

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 I will fade in and out

}

```

`createSpring` also takes a function in case you want to pass a reactive value as a style!

```jsx

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.

```jsx

function createSprings(

  lengthFn: number | (() => number),

  props: Props[] & CreateSpringsProps>[]

): Accessor>[]> & {

  ref: SpringRefType>;

};

function createSprings(

  lengthFn: number | (() => number),

  props: (i: number, ctrl: Controller) => Props

): Accessor>[]> & {

  ref: SpringRefType>;

};

```