(work in progress, looking for feedback)
react-ease
back to first principles
npm install react-ease react --save
canned animations for react/react-native
(if you're looking for something more dynamic, consider react-springs)
// output floats from 0 to 100 over 0.5 seconds<Ease from=0 to=100 duration=500> <div>val</div> // yes, children is a function</Ease> // you can tell when it's done<Ease from=0 to=100 duration=500 delay=500> <div>animation done ? 'over!' : 'running...'</div></Ease> // you can ease multiple values at once<Ease from=left: 0 top: 0 to=left: 100 top: 100 ease='easeInElastic'> <div style=val>move it move it</div></Ease> // or if you want more control over each value<Ease from=0 to=100 duration=500> <Ease from=0 to=100 duration=200 onProgress=::consolelog> <div style=left: x top: y>not bad!</div> </Ease></Ease> // finally, you can chain a bunch of them together<Chain sequence= from: left: 0 top: 0 opacity: 1 to: left: 100 top: 100 from: left: 50 to: top: 50 ease: 'easeOutCubic' to: opacity: 0 duration: 500 delay: 200 onProgress= done && console repeat=5> <div style=val>sweet!</div></Chain>
Ease::props
- from: number/object
- to: number/object
- duration: number (ms)
- ease: string/function
./src.js
has a list of available easing functions, or pass in your own - delay: number (ms)
- onProgress: function - optional callback called on every 'movement'. 'returns' the current value, and a
done
flag - repeat: number
Chain::props
- sequence: array
- repeat: number
thanks
- ease-sential, of which react-ease contains a tweaked port