react-overdrive

Super easy magic-move transitions for React apps.

Demos

1. Page transitions

!Overdrive Demo

2. Image Gallery with next.js

!Overdrive Demo

3. With React Router

!Overdrive Demo

Install

``
$ npm install react-overdrive --save
`

Usage

$3

Wrap any element (not just images) in a component. Add the same id to create a transition between the elements.

On page1.js:
`js
import Overdrive from 'react-overdrive'

const pageA = (props) => (



);
`

On page2.js:
`js
import Overdrive from 'react-overdrive'

const pageB = (props) => (



);
`

Now route between the pages.

$3

On page.js:
`js
import Overdrive from 'react-overdrive'

const page = (props) => (



);
`

API

| Prop | Description | Default Value |
|----------------|------------------------------------------------------------------------------------------------------------------------------|---------------|
| id | Required. A unique string to identify the component. | |
| element | Wrapping element type. | 'div' |
| duration | Animation duration (in milliseconds). | 200 |
| animationDelay | Add delay of calculating the mounted component position. Setting to 1 usually helps avoiding issues with window scrolling. | null |
| onAnimationEnd | Event dispatched when the animation has finished. | null |

How does it work?

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 absolute` position and CSS transformed from the source to the target position.

Sponsors

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

Thanks to BrowserStack for providing cross-browser testing.

Who made this?

Tal Bereznitskey. Find me on Twitter as @ketacode.