Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

49

.99

$

24

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Example 3: Transition With React Router

https://gist.github.com/stolinski/2089f700231cc7415e631128e3b3ce4d

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

const Routes = () => {
  return (
    <Router>
      <ul className="router-nav">
        <NavLink to="/">One</NavLink>
        <NavLink to="/two">Two</NavLink>
        <NavLink to="/three">Three</NavLink>
      </ul>

      <div>
        <Switch>
          <Route exact path="/" component={One} />
          <Route exact path="/two" component={Two} />
          <Route exact path="/three" component={Three} />
        </Switch>
      </div>
    </Router>
  );
};

function NavLink(props) {
  return (
    <li>
      <Link {...props} />
    </li>
  );
}

const One = () => {
  return (
    <div className="page-route">
      <h1>One</h1>
    </div>
  );
};
const Two = () => {
  return (
    <div className="page-route two">
      <h1>Two</h1>
    </div>
  );
};
const Three = () => {
  return (
    <div className="page-route three">
      <h1>Three</h1>
    </div>
  );
};

export default Routes;

Downloads

Become a pro to download code and videos

Comments

Adam

about 1 year ago

version 9 of react springs has changed this a bit. https://docs.pmnd.rs/react-spring/hooks/use-transition scroll to the bottom for the current implementation of useTransitions

Giupi

about 1 year ago

@Rogelio Thank you! Much appreciated!

User avatar

Dawid Dahl

over 1 year ago

This was so great to learn! Wow!

Rogelio

over 1 year ago

Anyone following this and having issues with __RouterContext being exported, it has been moved to react-router

import { __RouterContext } from 'react-router';

Barbara

over 2 years ago

Hey! Did someone try to implement this animation with React/Typescript? Can't get it to work! I am going crazy! :/

User avatar

Flavien

over 2 years ago [edited]

There is a useLocation hook now with the react-router-dom library, if you want clean stuff without '__RouterContext' :

let location = useLocation();

To fix the bug on Y axis as said in previous comments :

from: { opacity: 0, position: "absolute", width: "100%", transform: "translate3d(100%,0%,0)" }, enter: { opacity: 1, transform: "translate3d(0%,0%,0)" }, leave: { opacity: 0, transform: "translate3d(0,100%,0)" }

Carter

over 2 years ago

@Prashant I was wondering the same. any luck finding the answer to this?

Chance Peragine

almost 3 years ago

@Matt Cushing Thanks so much for the information. Super useful!

User avatar

Matt Cushing

almost 3 years ago [edited]

@Brandon I figured out the reasoning. At least I'm like 99% positive and you don't have to give it a greater than zero value for every axis. The reason is because, just like every CSS value, if you put a 0 without a unit that it defaults to pixels. This is one situation where react-spring doesn't know how to use different units. If you actually try putting 'px' next to certain 0s you'll see that it doesn't know how to measure it correctly and you'll get a leave transition that only goes partways instead of a full 100%.

However, by simply putting a % sign next to the 0s instead, it works :). Although it works, I would put the correct unit next to every 0 that gets changed in a transition. In other words, put a % next to the 0 in the Y axis of the from property since you are changing the Y axis in the leave property, put a % next to the 0 in the X axis of the leave property since you are changing it in the from property, and lastly put a % next to the X and Y axis in the enter property as you are modifying both in the from and leave property. You don't have to do each one to get it to work but you might as well play it safe just in case you encounter a future bug you can't figure out that turns out to be caused by this.

from: { transform: 'translate3d(100%, 0%, 0)' }, enter: { transform: 'translate3d(0%, 0%, 0)' }, leave: { transform: 'translate3d(0%, 100%, 0)' },

Hope this helps someone understand!

Edit: For some odd reason it bugs out if you try to put units on the axis that you are not changing such as putting %s on all of the Z axis. Definitely a bug that I'll report when I get up in the AM. So for now it seems the rule is to use the same units with translate (maybe all transform properties) and to only and always put units on 0s if they are being changed in a different state/property.

Gavin Meier

almost 3 years ago

There is a useLocation hook now :)

Marcel

about 3 years ago [edited]

__RouterContext is unsafe to use, is it an alternative to gain access to the location of BrowserRouter?

edit: Found the solution, using Route and render props wrapped around switch will access location, a real example is at react-router official docs

User avatar

Dan

about 3 years ago

@Brandon Thanks for that Brandon.

Awesome content as always, Scott.

Prashant

about 3 years ago [edited]

This is pretty dope. however i was wondering ... how can i set the different transform property for each route ??.. Like, two will come from right and three will come from bottom right corner and scale up ?

Do i need to set that transition into each respected component ?

Brandon

about 3 years ago

I figured out a way around the transition bug. The key is to set a greater-than-zero value for every axis that needs to be animated on the from and leave states. So if you set it to something like "0.01%" the transition will fire correctly.

Example: from: { transform: "translate3d(100%, 0.01%, 0)" }, enter: { transform: "translate3d(0, 0, 0)" }, leave: { transform: "translate3d(0.1%, 100%, 0)" },

Want to join the conversation?

Become a Pro member today!