Popularity
3.8
Stable
Activity
0.0
Stable
524
6
27
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
data-driven-motion alternatives and similar libraries
Based on the "UI Animation" category
-
react-motion
A spring that solves your animation problems. -
react-spring
A spring physics based React animation library. -
framer/motion
Open source, production-ready animation and gesture library for React -
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-router-transition
Transitions built for react-router, powered by react-motion. -
react-gsap-enhancer
Use the full power of React and GSAP together. -
react-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
React Native Circle Menu
⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Made by @Ramotion -
react-spark-scroll
Scroll-based actions and animations for react. -
react-track
Track the position of DOM elements. Create cool animations. -
react-mt-svg-lines
A React.js wrapper component to animate the line stroke in SVGs. -
react-atv-img
A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers. -
react-web-animation
React components for the Web Animations API -. -
react-parallax-component
Easiest way to add scroll parallax effect on the component.
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) })}
/>