Popularity

4.6

Stable

Activity

0.0

Stable

Stars 530

Watchers 6

Forks 30

Last Commit over 5 years ago

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 9.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 Firebase alternative introduces iOS support

Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

Promo appwrite.io

framer/motion

9.5 9.9 data-driven-motion VS framer/motion

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

8.3 1.7 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

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

React animation.
react-anime

6.6 0.0 data-driven-motion VS react-anime

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

5.5 0.0 data-driven-motion VS rc-animate

anim react element easily
react-gsap-enhancer

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

Use the full power of React and GSAP together
react-parallax-tilt

5.3 9.5 data-driven-motion VS react-parallax-tilt

👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
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.5 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-atv-img

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

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

3.7 0.0 data-driven-motion VS react-track

Track the position of DOM elements. Create cool animations.
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.0 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.6 0.0 data-driven-motion VS animakit-expander

UNMAINTAINED: AnimakitExpander
animakit-rotator

1.5 0.0 data-driven-motion VS animakit-rotator

UNMAINTAINED: AnimakitRotator
animakit-elastic

1.2 0.0 data-driven-motion VS animakit-elastic

UNMAINTAINED: AnimakitElastic
react-ts-typewriter

0.9 7.8 data-driven-motion VS react-ts-typewriter

Easy to use typewriter component written with Typescript and React 18+ in mind
react-animatable

0.8 9.3 data-driven-motion VS react-animatable

A powerful composable animation library for React, built on Web Animations API and React hook.
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) })}
/>