How to make amazing transitions with React Tiger Transition.

In this tutorial, we are going to make a beautiful website routing transitions with react-tiger-transitions 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

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

2. basic understanding of React and javascript.

3. npm installed

4.(Optional), basic understanding of react-router-dom.

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

create-react-app tiger-transitions-tutorial

cd into the app

cd tiger-transitions-tutorial

next npm install some packages.

npm i react-tiger-transition

install the dependent packages

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

react-router-dom. is a package for routing between pages.

react-transition-group is used for making transitions.

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

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.

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

Navigation is the react-router-dom equivalent of Switch though some comparisions aren't exact.

Now import the min.css file below that.

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 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.

#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.

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.

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.

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.

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

Now add the style object to the screenProps.

{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 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.

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.

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.

<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.

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

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

<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.

     <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.

<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

Make the skeleton for the component.

import React from 'react';

const DownTheStreet = () => {
  return (
    <div>

    </div>
  );
};

export default DownTheStreet;

Import Link from react tiger transition.

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

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

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

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

<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.

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

//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.

glueOut({
  name: 'glueout-left'
})
glueOut({
  name: 'glueout-right',
  direction: 'right'
})

App.js

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

<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.

      <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.

<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.

<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.

              //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

        <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.

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

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

<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

This is another project for my girlfriend that uses tiger transitions.

Please like, share and follow if you found this tutorial engaging.