React links time! ⚛️ Super easy magic-move transitions ⚛️ Virtual DOM explained…

  • Wrap any element (not just images) in a component.
  • Add the same to create a transition between the elements.
  • A transition is made when an component is unmounted and another is mounted not later than 100ms.
  • The transition is made by cloning the unmounted and mounted components, adding them with position and CSS transformed from the source to the target position.

GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.

We recommend upgrading to the latest Safari, Google Chrome, or Firefox.

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

If nothing happens, download the GitHub extension for Visual Studio and try again.

Super easy magic-move transitions for React apps.

to create a transition between the elements.

import Overdrive from ‘react-overdrive’ const pageA = (props) => (

Page A < /h1> < /Overdrive> < /div> );

import Overdrive from ‘react-overdrive’ const pageB = (props) => (

Page B < /h1> < /Overdrive> < /div> );

Now route between the pages.

import Overdrive from ‘react-overdrive’ const page = (props) => (

{props.loading && < /Overdrive>} {! props.loading && < /Overdrive>} < /div> );

is mounted not later than 100ms.

position and CSS transformed from the source to the target position.

Thanks to the following companies for generously providing their services/products to help improve this project:

Thanks to BrowserStack for providing cross-browser testing.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh…

GitHub