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

Super easy magic-move transitions for React apps
https://github.com/berzniz/react-overdrive

animations magic-move react router transitions

Last synced: about 2 months ago
JSON representation

Super easy magic-move transitions for React apps

• Host: GitHub
• URL: https://github.com/berzniz/react-overdrive
• Owner: berzniz
• License: mit
• Created: 2017-03-06T13:47:55.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T22:17:41.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T17:42:10.667Z (5 months ago)
• Topics: animations, magic-move, react, router, transitions
• Language: JavaScript
• Homepage: https://react-overdrive.now.sh
• Size: 6.09 MB
• Stars: 2,973
• Watchers: 33
• Forks: 85
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-overdrive

Super easy magic-move transitions for React apps.

## Demos

1. [Page transitions](https://overdrive-demo.now.sh)

![Overdrive Demo](assets/overdrive.gif "Demo")

2. [Image Gallery with next.js](https://nextgram-overdrive.now.sh)

![Overdrive Demo](assets/nextgram-overdrive.gif "Demo")

3. [With React Router](https://overdrive-rr4.now.sh)

![Overdrive Demo](assets/rr-overdrive.gif "Demo")

## Install

```

$ npm install react-overdrive --save

```

## Usage

### Example with routing

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) => (

  


    
Page A

    

      

    

  

);

```


On `page2.js`:

```js

import Overdrive from 'react-overdrive'

const pageB = (props) => (

  


    
Page B

    

      

    

  

);

```


Now route between the pages.

### Example without routing

On `page.js`:

```js

import Overdrive from 'react-overdrive'

const page = (props) => (

  


    {props.loading && }

    {!props.loading && }

  

);

```


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

| easing         | Animation easing function.                                                                                                   | ''            |

| 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](https://browserstack.com/) for providing cross-browser testing.

## Who made this?

Tal Bereznitskey. Find me on Twitter as [@ketacode](https://twitter.com/ketacode).