Popularity
4.4
Stable
Activity
0.0
Stable
548
6
19
Programming language: JavaScript
License: MIT License
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.
-
-
framer/motion
DISCONTINUED. Open source, production-ready animation and gesture library for React [Moved to: https://github.com/motiondivision/motion] -
-
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
-
-
-
-
react-parallax-tilt
👀 Easily apply tilt hover effect to React components - lightweight/zero dependencies 3kB -
-
-
React Native Circle Menu
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion -
-
-
-
-
-
-
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers -
-
react-tween
DISCONTINUED. DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead! -
-
-
-
-
-
-
-
-
-
anim-react
simple js react animation, animation hook, web Animation interface, onclick animation, onview,onsight animation, without css animation, no transition animation, js animation class usage.
SurveyJS - JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor
Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.
Promo
surveyjs.io
Do you think we are missing an alternative of data-driven-motion or a related project?
README
data-driven-motion
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) })}
/>