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

  •        4

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.

https://github.com/IjzerenHein/react-native-magic-move#readme
https://github.com/IjzerenHein/react-native-magic-move

Dependencies:

lodash.findlast : ^4.6.0

Tags
Implementation
License
Platform

   




Related Projects

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-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.

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.

react-move - React Move πŸŒ€ Beautiful, data-driven animations for React

  •    Javascript

Beautiful, data-driven animations for React. React-move allows you to define your animations using durations, delays and ease functions. In react-motion you use spring configurations to define your animations.

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.


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.

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.

Hero - Elegant transition library for iOS & tvOS

  •    Swift

Hero is a library for building iOS view controller transitions. It provides a declarative layer on top of the UIKit's cumbersome transition APIs—making custom transitions an easy task for developers.Hero is similar to Keynote's Magic Move. It checks the heroID property on all source and destination views. Every matched view pair is then automatically transitioned from its old state to its new state.

Hero - Elegant transition library for iOS & tvOS

  •    Swift

Hero is a library for building iOS view controller transitions. It provides a declarative layer on top of the UIKit's cumbersome transition APIs—making custom transitions an easy task for developers. Hero is similar to Keynote's Magic Move. It checks the heroID property on all source and destination views. Every matched view pair is then automatically transitioned from its old state to its new state.

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.

react-magic - Automatically AJAXify plain HTML with the power of React. It's magic!

  •    Javascript

React-Magic is an experimental library that uses the power of Facebook's React library to inject AJAX-loading goodness into plain old HTML webpages, without having to write any custom JavaScript. You can even use CSS transitions between the pages. Simply add a single script tag (or click a bookmarklet) and "it just works".HTMLtoJSX is a component of React-Magic that converts HTML to JSX. It can be used standalone, either on the web or via Node.js.

react-native-meteor-boilerplate

  •    Javascript

This is a simple way to get started building an app with React Native and Meteor. It is opinionated to make it easy for people to start but if you have your own way of doing things it's very easy to swap things out and move them around however you see fit. As it currently stands this project is only focused on configuring the React Native project. The Meteor side is up to you. For thoughts on how to structure your Meteor App I would suggest you read the Meteor Guide and the Mantra spec.

react-magic-move

  •    Javascript

This was just a fun experiment, with some love, it could definitely be a real thing, but I don't have time. I will merge pull requests to keep it working, but I don't maintain this right now.

react-router-native - A routing library for React Native that strives for sensible API parity with react-router πŸ€–

  •    Javascript

A routing library for React Native that strives for sensible API parity with react-router. React Router community decided that a reducer-based paradigm similar to that of NavigationExperimental is better suited to native navigation. Transition to a reducer-based paradigm is also being discussed for the web. On the other hand, NavigationExperimental has no intention to support a React Router-like interface and leaves the navigation state up to the developer to maintain.

react-native-progress - Progress indicators and spinners for React Native using ReactART

  •    Javascript

Progress indicators and spinners for React Native using ReactART. To use the Pie or Circle components, you need to include the ART library in your project on iOS, for android it's already included.

react-native-collapsible - Animated collapsible component for React Native, good for accordions, toggles etc

  •    Javascript

Pure JavaScript, supports dynamic content heights and components that is aware of its collapsed state (good for toggling arrows etc). This is a convenience component for a common use case, see demo below.

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-native-copilot - Step-by-step walkthrough for your react native app

  •    Javascript

Optional: If you want to have the smooth SVG animation, you should install and link react-native-svg. If you are using Expo, you can skip this as Expo comes with react-native-svg. Before defining walkthrough steps for your react elements, you must make them walkthroughable. The easiest way to do that for built-in react native components, is using the walkthroughable HOC. Then you must wrap the element with CopilotStep.