https://github.com/tkh44/data-driven-motion

Easily animate your data in react
https://github.com/tkh44/data-driven-motion

animation data-driven-motion motion react react-motion reactjs spring

Last synced: about 8 hours ago
JSON representation

Easily animate your data in react

• Host: GitHub
• URL: https://github.com/tkh44/data-driven-motion
• Owner: tkh44
• License: mit
• Created: 2017-03-01T21:28:03.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-06-08T18:25:40.000Z (over 7 years ago)
• Last Synced: 2025-01-05T05:07:30.969Z (7 days ago)
• Topics: animation, data-driven-motion, motion, react, react-motion, reactjs, spring
• Language: JavaScript
• Homepage: https://tkh44.github.io/data-driven-motion/
• Size: 3.02 MB
• Stars: 546
• Watchers: 7
• Forks: 32
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - data-driven-motion - Easily animate your data. (UI Animation / Form Components)
• awesome-react - data-driven-motion - Easily animate your data.  (UI Animation / GraphQL)
• awesome-list - data-driven-motion - Easily animate your data in react. (Ferramentas / Form Components)
• awesome-react-components - data-driven-motion - Easily animate your data. (UI Animation / Form Components)
• awesome-react-components - data-driven-motion - Easily animate your data in react. (UI Animation / Form Components)
• awesome-react-components - data-driven-motion - Easily animate your data. (UI Animation / Form Components)
• fucking-awesome-react-components - data-driven-motion - Easily animate your data. (UI Animation / Form Components)
• awesome-react-components - data-driven-motion - Easily animate your data. (UI Animation / Form Components)
• awesome-react-components - data-driven-motion - Easily animate your data. (UI Animation / Form Components)

README

        
# data-driven-motion

[![npm version](https://badge.fury.io/js/data-driven-motion.svg)](https://badge.fury.io/js/data-driven-motion)

[![Build Status](https://travis-ci.org/tkh44/data-driven-motion.svg?branch=master)](https://travis-ci.org/tkh44/data-driven-motion)

[![codecov](https://codecov.io/gh/tkh44/data-driven-motion/branch/master/graph/badge.svg)](https://codecov.io/gh/tkh44/data-driven-motion)

[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://img.shields.io/badge/code_style-standard-brightgreen.svg)

Easily animate your data in react

This is a small wrapper around [react-motion](https://github.com/chenglou/react-motion) with the intention of simplifying the api for my most common use case.

## [Demos and Docs](https://tkh44.github.io/data-driven-motion/)

```bash

npm install -S data-driven-motion

```

## Motion

```jsx

}

  render={(key, data, style) => 
{data.name}
}

  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) })}

/>

```