Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pedrobern/react-tiger-transition
Full page transitions with react-router.
https://github.com/pedrobern/react-tiger-transition
animation page-transitions react react-router react-transition-group
Last synced: 14 days ago
JSON representation
Full page transitions with react-router.
- Host: GitHub
- URL: https://github.com/pedrobern/react-tiger-transition
- Owner: PedroBern
- License: mit
- Created: 2019-10-06T11:19:49.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T12:43:41.000Z (almost 2 years ago)
- Last Synced: 2024-10-16T18:32:39.353Z (27 days ago)
- Topics: animation, page-transitions, react, react-router, react-transition-group
- Language: JavaScript
- Homepage: https://pedrobern.github.io/react-tiger-transition/
- Size: 82.9 MB
- Stars: 488
- Watchers: 11
- Forks: 27
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-tiger-transition
[![downloads](https://img.shields.io/npm/dm/react-tiger-transition)](https://www.npmjs.com/package/react-tiger-transition)
[![Codecov Coverage](https://img.shields.io/codecov/c/github/pedrobern/react-tiger-transition/master.svg?style=flat-square)](https://codecov.io/gh/pedrobern/react-tiger-transition/)
[![Build Status](https://travis-ci.com/PedroBern/react-tiger-transition.svg?branch=master)](https://travis-ci.com/PedroBern/react-tiger-transition)
[![dependencies](https://david-dm.org/pedrobern/react-tiger-transition.svg)](https://github.com/PedroBern/react-tiger-transition)
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg)](https://github.com/pedrobern/react-tiger-transition/blob/master/CONTRIBUTING.md)Page transitions for [react router dom](https://www.npmjs.com/package/react-router-dom). Animate your routes programmatically during navigation. Instead of defining the animation inside ``, this module defines inside ``, allowing to easily reach and leave the same url with different transitions.
![demo-gif](https://github.com/PedroBern/react-tiger-transition/raw/master/demo2.gif)
___## Documentation
- [Documentation and Demo](https://pedrobern.github.io/react-tiger-transition)
## Features
- Create dynamic transitions on the fly.
- No need to load a bunch of CSS!
- Zero dependencies.
- 20+ built-in transitions (the tigers).
- Minimum configuration.
- Fully customizable (raise your own tigers!).
- Built with [react-transition-group](https://github.com/reactjs/react-transition-group) and [react-router-dom](https://github.com/ReactTraining/react-router).
- Inspired by [react-router-transition](https://github.com/maisano/react-router-transition) and [this transitions collection](https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/).## Installation
```
npm i react-tiger-transition
```You need to install peerDependencies:
```
npm i react-router-dom react-transition-group
```## Contributing
See [CONTRIBUTING](https://github.com/pedrobern/react-tiger-transition/blob/master/CONTRIBUTING.md).