Displaying 1 to 7 from 7 results

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

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-native-shared-element - Native shared element transition "primitives" for react-native 💫

  •    Javascript

This library in itself is not a Navigation- or Router library. Instead, it provides a set of comprehensive full native building blocks for performing shared element transitions in Router- or Transition libraries. If you are looking for the React Navigation binding, you can find it here. Shared-element transitions add shine to your app but can be hard to do in practise. It's possible to achieve some nice transitions by building custom modals and using the the core react-native API, But this also brings with it many restrictions. Things like resizing an image or making sure no "flicker" occurs even an older Android devices can be a real challenge.

react-navigation-magic-move - Bindings for using react-navigation with react-native-magic-move 🐰🎩✨

  •    Javascript

react-native-magic-move triggers its animations whenever it detects that a new MagicMove view has been mounted. However, navigation libraries such as react-navigation keep components mounted for better performance and faster switching. This means that actions such as back navigation, tab switching or modal popups don't trigger an animation or don't trigger it consistently. This binding solves that problem by installing a hook that forwards the navigator scene information to react-native-magic-move. Magic-move will now animate your components when transitioning from one scene to another. If you want to opt-out of transitions, then use the disabled prop to turn off transitions towards that scene or component.

react-navigation-shared-element - React Navigation bindings for react-native-shared-element 💫

  •    Javascript

This library is under development and is subject to API changes. At the moment it supports the v3 and v4 versions of react-navigation. Only the stack navigator is supported at the moment (the v2-alpha version of stack-navigator is not supported as it misses certain lifecycle events). As time progresses, the goal is to also support the animated switch navigator, implement appear and disappear transitions, and have the native extensions land in Expo (UPDATE: Expo is working on including the native-extensions in SDK 35!).