https://github.com/threepointone/react-springs

react+rebound
https://github.com/threepointone/react-springs

Last synced: about 1 month ago
JSON representation

react+rebound

• Host: GitHub
• URL: https://github.com/threepointone/react-springs
• Owner: threepointone
• Created: 2015-06-07T20:53:46.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-08-31T05:26:02.000Z (almost 9 years ago)
• Last Synced: 2024-05-02T05:41:28.964Z (2 months ago)
• Language: JavaScript
• Size: 471 KB
• Stars: 91
• Watchers: 5
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Lists

• awesome-react-function-as-child-components - react-springs

README

        
react-springs

---

(bring your family and friends)

`npm install react-springs react rebound --save`

Dynamic animations for [react](https://facebook.github.io/react/)/[react-native](https://facebook.github.io/react-native/), powered by [rebound](https://github.com/facebook/rebound-js).

(if you're looking for something more conventional, consider [react-ease](https://github.com/threepointone/react-ease))

```js

// output floats gradually from 0 to 10

  {val => 
{val}
}       // yes, children is a function.


// you can compose multiple springs

  {val => 
}


// alternately, if you want control on each spring

 {x =>

     {y =>

        
}

    }


// and if you'd rather not use the child-function pattern



   this.setState({ value: spring.getCurrentValue() })} />

  
moving box



```


props

---

- to (Spring): *number* : sets end value for the spring. if `atRest` is `true`, then the spring immediately snaps to `to`.

- to (Springs): *obj* : similar to `Spring`, but accepts a map of key-values.

- from: *number* : sets start value for a spring. changing it while a spring is in motion will set its current value to `from`, and continue to `to`

- atRest: *boolean*

- friction: *number*

- tension: *number*

- overshootClamping: *boolean*

- onSpringUpdate (Spring): *function* : optional callback to be notified on every spring movement. 'returns' the spring.

- onSpringUpdate (Springs): *function* : like `Spring`, but 'returns' `key, spring`

- springSystem: *SpringSystem* : optional instance of rebound's SpringSystem. useful for perf/custom loopers/etc.

dev

---

`npm install`

`npm start`

notes

---

- don't forget about the ridiculous performance boost you get from React when NODE_ENV=production

- open to ideas on how to set 'velocity' for flings, etc