react-native-magic-move - Create magical move transitions between scenes in react-native 🐰🎩✨

•    Javascript

---

A follow up project called react-native-shared-element has been created which can be considered the successor to react-native-magic-move. It it an all native solution that provides superior performance (no more passes over the react-native bridge) and transitions. It however does not support some of the more exotic transition types (flip, shrinkAndGrow) that Magic Move does. It also doesn't support the web-platform yet and requires native extensions to run. New users are advised to use react-native-shared-element when possible. As for Magic Move, no more new developments will be started for Magic Move, merely critical bug-fixes. This notification will be updated as development on react-native-shared-element progresses. * The native extensions are recommended to get the best performance, but they are not required. This makes it possible to use react-native-magic-move with expo or react-native-web. If you're having trouble installing the native extensions, please see this guide on how to install them manually.

react-native magic-move scene transitions ui-animation react-native-magic-move fluid scene-transition

react-flip-move - Effortless animation between DOM changes (eg

•    Javascript

---

This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes. CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; from their perspective, they've been removed and inserted elsewhere in the document.

reactjs react-flip-move animation react hardware-acceleration flip transition-animation react-dom magic-move component react-component web-animations

react-spring - 🙌 Helping react-motion and animated to become best friends

•    Javascript

---

A set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs once plain CSS can't cope any longer. Forget easings, durations, timeouts and so on as you fluidly move data from one state to another. This isn't meant to solve each and every problem but rather to give you tools flexible enough to confidently cast ideas into moving interfaces. react-spring is a cooked down fork of Christopher Chedeau's animated (which is used in react-native by default). It is trying to bridge it with Cheng Lou's react-motion. Although both are similarily spring-physics based they are still polar opposites.

react motion animated animation spring

react-overdrive - Super easy magic-move transitions for React apps

•    Javascript

---

Super easy magic-move transitions for React apps. Wrap any element (not just images) in a <Overdrive id=""></Overdrive> component. Add the same id to create a transition between the elements.

react magic-move transitions animations router overdrive reactjs react-router nextjs

react-simple-animate - 🎯 React UI animation made easy

•    TypeScript

---

🎯 React UI animation made easy

react animation animate transition-animation animate-css animation-controller animation-sequence keyframes-animation

yubaba - is an element to element animation orchestrator for React.js ✨

•    TypeScript

---

Complex page transitions are becoming more common on the web but we're still at a point where we need to write a lot of boilerplate to make it happen, worse yet disjointed parts of our apps needing to know about each other to make it all work. Yubaba tries to solve this by allowing disjointed parts of your app define what animations they want to happen when a matching partner is found, without explicit knowledge of each other.

transition animations material-transitions reactjs orchestration element-to-element magic-move animation react page-transitions animation-orchestrator

ant-motion - :bicyclist: Animate specification and components of Ant Design

•    Javascript

---

Animation specification and components of Ant Design. Ant Motion is a motion design specification from Ant Design, and also provide a complete solution with lots of out-of-box animations for your React applications.

react motion animation motion-design design react-motion react-animate react-component

react-motion - A spring that solves your animation problems.

•    Javascript

---

Animate a counter from 0 to 10. For more advanced usage, see below. Works with React-Native v0.18+.

react component react-component transitiongroup spring tween motion animation transition ui

react-native-motion - Animate it! Easily!

•    Javascript

---

We need to specify source and destination for shared element. This library then will move the shared element from source position to destination position. This repo is still under reconstruction. Will be improved.

animation react-native ux motion ui ios android

react-native-pathjs-charts - Android and iOS charts based on react-native-svg and paths-js

•    Javascript

---

This library is a cross-platform (iOS/Android) library of charts/graphs using react-native-svg and paths-js based on the excellent work done by Roman Samec in the react-pathjs-chart library. The project is an early attempt at providing a ubiquitous solution for charts & graphs for React Native that offer a unified view across devices. Components include Pie charts, Bar charts, Smoothline charts, Stockline charts, Scatterplots, Tree graphs and Radar graphs. Since Paths-Js makes no assumptions about rendering, this library is perfect for using SVG path objects to render custom charts easily.

charts graphs paths-js react-native ios android react-native-svg cross-platform radar-graphs bar-graphs pie-graphs tree react-pathjs-chart

react-magic-hat - 🎩✨Library to implement the Magic Hat technique, blazingly fast 🚀

•    Javascript

---

React implementation of what I call the Magic Hat UI technique [DEMO]. 🚀 Blazing fast. 60+ FPS hardware-accelerated CSS transforms, using the FLIP technique. Fluid and performant. Thanks to react-flip-move for that.

ui ux-research motion react library ux ux-patterns react-dom animation flip react-component stack web-animations

react-flip-toolkit - A React FLIP animation library for highly configurable transitions

•    Javascript

---

A React FLIP animation library for highly configurable transitions

flip-animations reactjs scale-animation animations animation-library react-component flip transition animation

data-driven-motion - Easily animate your data in react

•    Javascript

---

This is a small wrapper around react-motion with the intention of simplifying the api for my most common use case.

react reactjs animation react-motion motion data-driven-motion spring animtion react-animation data driven

react-native-svg-charts - 📈 One library to rule all charts for React Native 📊

•    Javascript

---

A much improved decorator system has been introduced, allowing for greater flexibility and less complexity. See releases for more information. In order to not bloat this README to much we've moved some examples over to react-native-svg-charts-examples. There we will try to showcase the really cool things you can do with this library. This README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.

react-native react-native-charts react-native-d3 d3 charts svg react-native-svg react-component react-native-component react mobile ios android vector chart

react-native-animatable - Standard set of easy to use animations and declarative transitions for React Native

•    Javascript

---

To make looping animations simply set the iterationCount to infinite. Most animations except the attention seekers work best when setting direction to alternate. You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a duration property, a spring animation will be used.

react-native animation transition react-component react-native-component react mobile ios android ui fade bounce slide animatable

react-transition-group - An easy way to perform animations when a React component enters or leaves the DOM

•    Javascript

---

ATTENTION! To address many issues that have come up over the years, the API in v2 is not backwards compatible with the original React addon (v1-stable).For a drop-in replacement for react-addons-transition-group and react-addons-css-transition-group, use the v1 release, which is still actively maintained. Documentation and code for that release are available on the v1-stable branch.

react transition addons transition-group animation css transitions

react-d3-library - Open source library for using D3 in React

•    Javascript

---

An open source library that will allow developers the ability to reroute D3 output to React’s virtual DOM. Just use your existing D3 code, and with a few simples lines, you can now harness the power of React with the flexibility of D3! React-D3-Library will compile your code into React components, and it also comes with a series of D3 template charts converted to React components for developers who are unfamiliar with D3. Not only do we build fully functional React components, but they utilize the power of D3 to automate scaling ranges, normalizing data, and constructing legends.

d3 react data visualization library graphs charts plots

victory-native - victory components for react native

•    Javascript

---

Note: react-native-svg has strict version requirements for both react and react-native. Please match versions to those required by react-native-svg. See the up-to-date requirements on the react-native-svg Readme. We encourage you to use the latest version of react-native-svg possible for your project, as victory-native issues are frequently solved by react-native-svg bugfixes.Full documentation can be found here.

react-native react d3 charts data-visualization

react-native-animation-book - A book talking about react-native animations, and walking you through from beginner to expert

•    HTML

---

If you don't care about anything just jump to the Basic Animation Examples which will eventually guide you from basic to advanced animations and allow you to experience the capabilities of React Native animations. React Native has had a fantastic reception. There have already been a ton of great applications built using React Native. However one hugely important part of mobile applications is animations. React on the web has generally been pretty poor at dealing with animations, but there are some great people out there attempting to solve this problem. One such solution is react-motion https://github.com/chenglou/react-motion/.

react-tween-state - React animation.

•    Javascript

---

The equivalent of React's this.setState, but for animated tweens: this.tweenState. Live demo and source.

react animation tween transition state interactive mixin interpolation