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: 10 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 (23 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).