Skip to content
Easily animate your data in react
JavaScript
Branch: master
Clone or download
Kye Hohenberger
Kye Hohenberger Merge pull request #4 from tkh44/update-build-and-tests
Update build and tests
Latest commit 207d19e Jun 1, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src Update color search Apr 6, 2017
docs Add demo site Mar 29, 2017
src Increase coverage Jun 1, 2017
.babelrc use rollup for build and update tests Jun 1, 2017
.gitignore Add demo site Mar 29, 2017
.travis.yml Use nwb thanks @insin 👍 Mar 2, 2017
CONTRIBUTING.md Made with ❤️ Mar 1, 2017
LICENSE Made with ❤️ Mar 1, 2017
README.md Update readme Mar 29, 2017
package.json use rollup for build and update tests Jun 1, 2017
rollup.config.js use rollup for build and update tests Jun 1, 2017

README.md

data-driven-motion

npm version Build Status codecov Standard - JavaScript Style Guide

Easily animate your data in react

This is a small wrapper around react-motion with the intention of simplifying the api for my most common use case.

Demos and Docs

npm install -S data-driven-motion

Motion

<Motion
  data={[]}
  component={<ul style={{ padding: 8 }} />}
  render={(key, data, style) => <li key={key} style={style}>{data.name}</li>}
  getKey={data => data.name}
  onComponentMount={data => ({ top: data.top, left: data.left })}
  onRender={(data, i, spring) => ({ top: spring(data.top), left: spring(data.left) })}
  onRemount={({ data }) => ({ top: data.top - 32, left: data.left - 32 })}
  onUnmount={({ data }, spring) => ({ top: spring(data.top + 32), left: spring(data.left + 32) })}
/>
You can’t perform that action at this time.