JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q11727F
  • License ISC

i like to move it move it

Package Exports

  • react-ease

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-ease) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

(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}>
  {val => <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}>
  {(val, done) => <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'>
  {val => <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}>{x =>
  <Ease from={0} to={100} duration={200} onProgress={::console.log}>{y =>
    <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={(i, val, done) => done && console.log('done!')}
  repeat={5}>
    {(val, done) => <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