react-springs
(bring your family and friends)
npm install react-springs react rebound --save
Dynamic animations for react/react-native, powered by rebound.
(if you're looking for something more conventional, consider react-ease)
// output floats gradually from 0 to 10<Spring to=10> <div>val</div> // yes, children is a function.</Spring> // you can compose multiple springs<Springs to=left: 20 top: 30 tension=30 overshootClamping=true> <div style=val></div></Springs> // alternately, if you want control on each spring<Spring to=20 friction=15> <Spring to=30 friction=7> <div style=left: x top: y/> </Spring></Spring> // and if you'd rather not use the child-function pattern<div> <Spring to=20 onSpringUpdate= this /> <div style=left: thisstatevalue>moving box</div></div>
props
- to (Spring): number : sets end value for the spring. if
atRest
istrue
, then the spring immediately snaps toto
. - 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 toto
- 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