Buy Now and unlock this series
$
49
.99
$
24
.99
yours forever
$
49
.99
$
24
.99
Become a Pro and unlock everything
$
24
.99
per month
$
24
.99
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
Animating React
23 videos
Course Instructor
Scott Tolinski
- Introduction
1M1S - Why React Spring & Physics Based Animations
11M39S - Getting Started
3M33S - A Basic Spring
9M52S - Toggling A Spring
8M10S - Animating Properties
7M19S - Interpolation Basics
12M11S - Example 1: Animated Nav
10M42S - Example 2: Cart Animation
10M53S - Emulating Keyframes
5M50S - Transition With Mounting and Unmounting
7M27S - Transition With Multiple Components
12M31S - Example 3: Transition With React Router
20M11S - Example 4: Modal Transition
16M50S - Configuration Options
12M24S - Animating Height Auto
19M44S - Example 5: Animation On Scroll With Waypoint
14M17S - Set Function & Gestures
17M9S - Gestures With Events
9M59S - useSprings
9M6S - useTrail
6M48S - useChain
19M14S - Where To Go From Here
3M55S
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!
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-routerimport { __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! :/
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!
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
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!