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

  •        47

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

https://react-overdrive.now.sh
https://github.com/berzniz/react-overdrive

Tags
Implementation
License
Platform

   




Related Projects

vue-overdrive - 🎩 Super easy magic-move transitions for Vue apps

  •    Vue

A Vue.js port of the amazing React Overdrive, using Ramjet under the hood.

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.

redux-router - Redux bindings for React Router – keep your router state inside your Redux store

  •    Javascript

Redux bindings for React Router. React Router is a fantastic routing library, but one downside is that it abstracts away a very crucial piece of application state — the current route! This abstraction is super useful for route matching and rendering, but the API for interacting with the router to 1) trigger transitions and 2) react to state changes within the component lifecycle leaves something to be desired.

react-router-scroll - React Router scroll management

  •    Javascript

React Router scroll management. react-router-scroll is a React Router middleware that adds scroll management using scroll-behavior. By default, the middleware adds browser-style scroll behavior, but you can customize it to scroll however you want on route transitions.

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-router-server - Server Side Rendering library for React Router v4.

  •    Javascript

Server Side Rendering library for React Router v4. If anyone is interested in taking over this project please let me know.

rogue.js - Rogue.js - the "nearly invisible" server-rendering framework for React applications

  •    Javascript

Rogue streamlines the process of creating server-rendered React applications. We call Rogue a nearly invisible framework, because it doesn't require a special /pages directory (like Nextjs) or a separate routes.js file (like Afterjs); all you need, is the App.js entry point you'd usually have. This means that you can wrap your app in layouts/transitions/providers, etc. the same way you would in a regular React Application, and staying true to React's values, you can organize your code however you like.

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

isomorphic-flux-boilerplate - ES7 Isomorphic Flux/ReactJS Boilerplate

  •    Javascript

A wonderfull boilerplate for Flux/ReactJS universal applications, running on koajs. Koa will be our server for the server side rendering, we use alt for our Flux architecture and react-router for routing in our app.

react-rocket-boilerplate - A boilerplate written in ES6 using ReactJS (along with React Router and RefluxJS), SASS, Gulp, and Browserify

  •    Javascript

A boilerplate using ReactJS (along with React Router and RefluxJS), SASS, Gulp, and Browserify that also utilizes Gulp best practices from this resource. Now that gulp dev is running, the server is up as well and serving files from the /build directory. Any changes in the /app directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address.

react-native-redux-router - React Native Router using Redux architecture

  •    Javascript

I've decided to stop supporting this component in favor to new release react-native-router-flux (https://github.com/aksonov/react-native-router-flux). The new version doesn't depend from concrete Flux/Redux implementation and allow you to build nested navigators easily. Also it allows to intercept route 'actions' from your store(s).

react-router-navigation - ⛵️ A complete navigation library for React Native and React Router

  •    Makefile

react-router-navigation is still a work in progress. That means it's extremely likely that you'll encounter issues. Always consider it. react-router-navigation provides tools to navigate between multiple screens with navigators or tab views. This library is based on react-router, react-navigation, and react-native-tab-view.

universal-router - A simple middleware-style router for isomorphic JavaScript web apps

  •    Javascript

A simple middleware-style router that can be used in both client-side (e.g. React, Vue.js) and server-side applications (e.g. Node.js/Express, Koa).Play with an example on JSFiddle, CodePen, JS Bin in your browser or try RunKit node.js playground.

react-router-bootstrap - Integration between React Router and React-Bootstrap

  •    Javascript

Integration between React Router v4 and React Bootstrap. Please note that by default React Router will match any location that contains path specified in to prop. To make <LinkContainer> to match the location exactly, set exact prop to true or use <IndexLinkContainer> instead.

react-native-dva-starter - a React Native starter powered by dva and react-navigation

  •    Javascript

Great thanks to @xuan45 for his cli tool dva-native-cli, check that project for more information. The builtin router of dva (not react-router v4), doesn't support React Native, we have to integrate other router components, such as Navigator, ExperimentalNavigation, react-native-router-flux and react-navigation. Since the former two will be depreciated in flavor of react-navigation, which is also be recommended by official, so I choose it to be the navigator.

react-router-component-transition - Example code for router which does animated page transitions using ReactCSSTranstionGroup

  •    Javascript

A simple component that overrides <Locations> in React-Router-Component to animate page transitions. Simply replace any usage of <Locations> in your app with <AnimatedLocations>.