Popularity

4.5

Declining

Activity

0.0

Stable

Stars 538

Watchers 7

Forks 32

Last Commit over 6 years ago

Monthly Downloads: 0

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.

react-spring

9.7 8.5 data-driven-motion VS react-spring

✌️ A spring physics based React animation library
react-motion

9.6 0.0 data-driven-motion VS react-motion

A spring that solves your animation problems.

Appwrite - The open-source backend cloud platform

The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!

Promo appwrite.io

framer/motion

9.5 9.7 data-driven-motion VS framer/motion

Open source, production-ready animation and gesture library for React
react-flip-move

8.2 0.0 data-driven-motion VS react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
velocity-react

8.0 0.0 data-driven-motion VS velocity-react

React components for Velocity.js
react-router-transition

7.6 0.0 data-driven-motion VS react-router-transition

painless transitions built for react-router, powered by react-motion
react-tween-state

6.8 0.0 data-driven-motion VS react-tween-state

React animation.
react-anime

6.5 0.0 data-driven-motion VS react-anime

✨ (ﾉ´ヮ´)ﾉ*:･ﾟ✧ A super easy animation library for React!
react-parallax-tilt

5.6 9.2 data-driven-motion VS react-parallax-tilt

👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
rc-animate

5.5 0.0 data-driven-motion VS rc-animate

anim react element easily
react-gsap-enhancer

5.3 0.0 data-driven-motion VS react-gsap-enhancer

Use the full power of React and GSAP together
React Native Circle Menu

5.0 0.0 data-driven-motion VS 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-motion-ui-pack

4.9 0.0 data-driven-motion VS react-motion-ui-pack

Wrapper component around React Motion for easier UI transitions.
gooey-react

4.6 0.0 data-driven-motion VS gooey-react

The gooey effect for React, used for shape blobbing / metaballs (0.5 KB) 🧽
react-magic-move

4.5 0.0 data-driven-motion VS react-magic-move

MagicMove for React.js.
react-spark-scroll

4.1 0.0 data-driven-motion VS react-spark-scroll

Scroll-based actions and animations for react
react-mt-svg-lines

3.9 0.0 data-driven-motion VS react-mt-svg-lines

A React.js wrapper component to animate the line stroke in SVGs
react-track

3.7 0.0 data-driven-motion VS react-track

Track the position of DOM elements. Create cool animations.
react-atv-img

3.6 0.0 data-driven-motion VS react-atv-img

A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React.
react-web-animation

3.6 0.0 data-driven-motion VS react-web-animation

React components for the Web Animations API - http://react-web-animation.surge.sh
react-transitive-number

3.1 0.0 data-driven-motion VS react-transitive-number

React component to apply transition effect to numeric strings, a la old Groupon timers
react.animate

2.8 0.0 data-driven-motion VS react.animate

state animation plugin for react.js
react-parallax-component

2.6 0.0 data-driven-motion VS react-parallax-component

Easiest way to add scroll parallax effect on the component
react-tween

2.6 0.0 data-driven-motion VS react-tween

DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead!
react-tweenful

1.8 0.0 data-driven-motion VS react-tweenful

Animation engine designed for React
animakit-expander

1.5 0.0 data-driven-motion VS animakit-expander

UNMAINTAINED: AnimakitExpander
animakit-rotator

1.4 0.0 data-driven-motion VS animakit-rotator

UNMAINTAINED: AnimakitRotator
react-animatable

1.1 0.0 data-driven-motion VS react-animatable

Tiny(~1kB) animation hooks for React, built on Web Animations API.
animakit-elastic

1.1 0.0 data-driven-motion VS animakit-elastic

UNMAINTAINED: AnimakitElastic
react-ts-typewriter

1.1 0.0 data-driven-motion VS react-ts-typewriter

Easy to use typewriter component written with Typescript and React 18+ in mind
auto-size-transition

0.8 0.0 data-driven-motion VS auto-size-transition

A component that scale dynamically according to the internal size
react-scroll-rotate

0.7 0.0 data-driven-motion VS react-scroll-rotate

Very simple react component for rotate element based on scroll position
anim-react

0.4 10.0 data-driven-motion VS 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.
react-tsparticles

0.3 - data-driven-motion VS react-tsparticles

A lightweight component to easily create interactive particles animations

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

Add another 'UI Animation' Library

Popular Comparisons

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