Description:
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:
