Popularity
4.5
Stable
Activity
0.0
Stable
530
6
30

Programming language: JavaScript
License: MIT License
Tags: UI Animation     React     Motion     Data     React-motion     Animtion     React-animation     Driven    
Latest version: v0.0.11

data-driven-motion alternatives and similar libraries

Based on the "UI Animation" category.
Alternatively, view data-driven-motion alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of data-driven-motion or a related project?

Add another 'UI Animation' Library
Less time debugging, more time building
sponsored scoutapm.com

Popular Comparisons

Developer Ecosystem Survey 2022
sponsored surveys.jetbrains.com

README

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