Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 30 days 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 (7 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)
2. [Image Gallery with next.js](https://nextgram-overdrive.now.sh)
3. [With React Router](https://overdrive-rr4.now.sh)
## 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).