Full Page Transitions With React-Router – Tiger-Transition

Tiger-Transition is a React component to for full page transitions react that animate your routes programmatically during navigation.

Instead of defining the animation inside <Route />, this module defines inside <Link />, allowing to easily reach and leave the same url with different transitions.

More 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 and react-router-dom.

Basic usage:

1. Install and import the components.

# NPM
$ npm i react-tiger-transition react-router-dom react-transition-group --save

import { 
  Link, 
  // transition components
  glide, 
} from 'react-tiger-transition';

// Stylesheet
import "react-tiger-transition/styles/main.min.css";

2. Apply a ‘Glide’ page transition effect to your app.

{
  direction: 'left',
  enter: {
    duration: 600,
    easing: 'easeOutQuad',
    opacity: 1,
    zIndex: 2,
    scale: 1,
    delay: 0
  },
  exit: {
    duration: 600,
    easing: 'easeOutQuad',
    opacity: 0.3,
    zIndex: 1,
    scale: 1,
    delay: 0
  }
}

Preview:

Download Details:

Author: PedroBern

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/PedroBern/react-tiger-transition

License: MIT