How to make amazing transitions with React Tiger Transition.
Tags: transitions, react, tutorial
Published: 2020-04-19 17:12:24



In this tutorial, we are going to make a beautiful website routing transitions with [react-tiger-transitions](https://pedrobern.github.io/react-tiger-transition/demo/glide/a) to give your UX a huge lift.

_Please be sure to Like and Comment if you find this helpful._

This will allow you to click through a series of links with beautiful transitions between routes using the npm package react-tiger-transitions.

Nothing is worst than having a problem you are trying to solve and the tutorial was never going to help you but, you didn't realize until you went through the whole thing. 

This is why I always add a link to what the tutorial does when it is practical. 

[sample of what is taught](https://i-love-taylor.surge.sh/)

A few more things to be aware of with this package. 


1. I am not sure if this application will work in app with context. It may work with redux but it was buggy when I tried with the useContext hook as well as prop passing with HOC. 

2. I also could not get this working at all with styled-components. 

If anyone knows the workarounds for these issues please add that in the comments below. 

__Prerequisites__

1. [creat-react-app](https://www.npmjs.com/package/create-react-app)

2. basic understanding of [React](https://reactjs.org/docs/getting-started.html) and [javascript.](https://javascript.info/) 

3. [npm installed](https://docs.npmjs.com/cli-documentation/)

4.(Optional), basic understanding of [react-router-dom.](https://www.npmjs.com/package/react-router-dom)

The first thing we need is to create-react-app. 

```bash
create-react-app tiger-transitions-tutorial
```
cd into the app

```bash
cd tiger-transitions-tutorial
```

next npm install some packages. 

```bash
npm i react-tiger-transition
```

install the dependent packages 

```bash
npm i react-router-dom react-transition-group
```

[react-router-dom.](https://www.npmjs.com/package/react-router-dom) is a package for routing between pages. 

[react-transition-group](https://reactcommunity.org/react-transition-group/) is used for making transitions. 

Next, we want to wrap our app component from inside the index.js with BrowserRouter.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import "react-tiger-transition/styles/main.min.css";
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
// wrapped in BrowserRouter
  <BrowserRouter>
    <App />
  </BrowserRouter>
  
,
 document.getElementById('root'))


serviceWorker.unregister();

```

Then go to the App.js and add the following import at the top of the file. 

```javascript
import { Navigation, Route, Screen, Link, glide, fade, glueOut } from "react-tiger-transition";
```

[Navigation](https://pedrobern.github.io/react-tiger-transition/docs/navigation) is the react-router-dom equivalent of [Switch](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md) though some comparisions aren't exact. 

Now import the min.css file below that.

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

This import creates the layouts containers and removes padding that we need to get this working. 

Next, we want to add the css style to the id of root that displays our whole application. 

In the [react-tiger-transition docs](https://pedrobern.github.io/react-tiger-transition/docs/quickstart) it recommends not doing this with javascript and with css style sheet.

Open the App.css add a view height of 100vh to the root id. 

```css
#root {
  height: 100vh;
}
``` 

Now open your App.js and again and erase the boilerplate react and replace it with the Navigation wrapper and a home route. 

```javascript
function App() {
  return (
    <Navigation>
      <Route exact path='/'>Home.</Route>
    </Navigation>
  );
}
```

It's not beautiful yet but if you did everything right your app should look like this in the browser. 



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rkvbebnithbnrqlsmoxl.png)

We should style this app so that we can stand to look at it while we build it. 

Make a style object to center everything with flex, add this object outside of the React component. 

```javascript
const screenStyle = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center"
};
```
_App.js_

Just like we added path and exact to route, add screen and screenProps to route.

```javascript
<Route  exact path="/" screen screenProps={{/* style object goes here. */}}>>
        
``` 

Now add the style object to the screenProps. 

```javascript
{style: {...screenStyle}}
```

In the browser, everything will be centered on mobile and desktop. 

We can add color along with screen style. 

Let's go to an [awesome site that generates color schemes](https://coolors.co/app) meet me back here after you have a scheme you like or follow with the colors in this tutorial. 

Add the first color to your style object like so. 

```javascript
style: {...screenStyle, backgroundColor: "#A5817F"}
```
_On the route tag._

It's looking good enough to put in a transition. 

Let's experiment with the glide transitions first. 

Add this outside the react component near the bottom of the file.

```javascript
glide({
  name: 'glide-bottom',
  direction: 'bottom'
});
glide({
  name: 'glide-top',
  direction: 'top'
});
```
In this code, we are calling on functions in the node_modules and telling them what effects we want when we go to a new route.

Now add a link to leave the home Route.

```javascript
<Link  to="/outside"><h4>outside</h4></Link>
```
Nothing happens when you click on it. Let's change that by making a path to get outside.

Add this to leave home. 

```javascript
<Route exact path='/outside'>outside</Route>
```

Back on the home route, let's designate the transition between the Link and to=/outside. 

```javascript
<Link transition='glide-top' to="/outside"><h4>outside</h4></Link>
```
When you click on the link it give a cool animation to the top! very cool. 

Now add a way to get back home by putting a link with a transition on the outside Route. 

```javascript
     <Route exact path='/outside'>
        <Link transition='glide-bottom' to="/home">
          <h4>Back to home.</h4></Link>
     </Route>
``` 

Add more screen props to make for better UI. 

```javascript
<Route exact path='/outside' screen screenProps={{
          style: { backgroundColor: "#BDA3A1",
            ...screenStyle }}}>
```

You don't have to have your whole UX in one file. To demonstrate, make a new file in the src folder called DownTheStreet.js

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jbswz2pnm2zkt8e7betp.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mldgnc0adso8avvpn1sw.png)

Make the skeleton for the component. 

```javascript
import React from 'react';

const DownTheStreet = () => {
  return (
    <div>
      
    </div>
  );
};

export default DownTheStreet;
```

Import Link from react tiger transition.

```javascript
import {Link} from 'react-tiger-transition'
```

Make a link to get away from the street and back to outside home. 

```javascript
<Link to='/outside'>outside the house.</Link>
```

Make the route to the street from the outside from _inside_ the App.js 

```javascript
<Link transition='glide-bottom' to="/home">
              <h4>Back to home.</h4>
            </Link>
             // within the /outside route, add only like below
              <Link to='/down-the-street'><h4>Down the street</h4></Link>
             // add only line above
          </Route>

```
_App.js_



Import the component at the top of the file. 

```javascript
import DownTheStreet from './DownTheStreet';
```
Now we can make the route below outside to render the DownTheStreet component when the url ends in /down-the-street

```javascript
//outside route is above. 
         <Route exact path='/down-the-street'> 
            <DownTheStreet /> 
          </Route>
```
this means that you don't have to add the glide({}) function calls in every component that you have a Link. 

We are going to add 2 more function calls so that for glueOut which makes the browser look like cards being taken off the top and put on the bottom of a deck. 

```javascript
glueOut({
  name: 'glueout-left'
})
glueOut({
  name: 'glueout-right',
  direction: 'right'
})
```
_App.js_

Also, add the glueout-right transition to the /down-the-street Link

```javascript
<Link transition='glueout-right' to='/down-the-street'><h4>Down the street</h4></Link>
```

it doesn't work yet. Why? Because we can't have more than one link inside a route like this. to fix it. Cut the link in the outside component liking you back to home. 

The new route will look like this. 

```javascript
      <Route exact path='/outside'screen screenProps={{
          style: { backgroundColor: "#BDA3A1",
            ...screenStyle }}}>
              <Link transition='glueout-right' to='/down-the-street'><h4>Down the street</h4></Link>
          </Route>
```

Go to the DownTheStreet component, add the glueout-left transition to the Link. 

```javascript
<Link transition='glueout-right' to='/outside'>outside the house.</Link>
```
_DownTheStreet.js_

It works but it's not that fancy without the css style like the other Components have. 

Add the screenProps to the Route.

```javascript
<Route exact path='/down-the-street'  screen screenProps={{
                                 //changed color
          style: { backgroundColor: "#6B4E4D",
            ...screenStyle }}}> 
```

Now that we have a glueOut working outside and down the street we get stuck between the two routes because the links take us back and forth. 

To fix this let,s have the route INSIDE the DownTheStreet component takes us around the corner and back home. 

```javascript
              //only changed the to="/" and the >text inside the brackets<
<Link transition='glueout-left' to='/around-the-corner'>around the corner.</Link>
```

_DownTheStreet.js_

Back in the App.js let's make a route for /around-the-corner

```javascript
        <Route exact path='/around-the-corner'screen screenProps={{
          style: { backgroundColor: "",
            ...screenStyle }}}>
              <Link to='/'><h4>Home</h4></Link>
          </Route>
```
_App.js_

Let's add one more effect so that we can teleport home with the fade transition. 

```javascript
fade({
  name: "default-fade"
});
```

Now add the fade transition to the '/' Link inside the /around-the-corner Route. 

```javascript
<Route exact path='/around-the-corner'screen screenProps={{
          style: { backgroundColor: "",
            ...screenStyle }}}>
              <Link transition='default-fade' to='/'><h4>Back to home</h4></Link>
</Route>
```

That's what this tutorial does.

  I really want to popularize this package because I really like the ability it gives you to tell a story with your web dev.

This is the [final product's git hub](https://github.com/TallanGroberg/tiger-transitions-tutorial)

This is another [project for my girlfriend](https://i-love-taylor.surge.sh/) that uses tiger transitions. 

Please _like_, share and _follow_ if you found this tutorial engaging.