[React Router 6 - Screen Transitions]

Hi @Rodrigo, sorry for my late response, this is exactly what I need!
I was already trying to hack around and create customized Router based on TransitionGroup 😑.

 

Still quite interesting that using a config prop works but creating entirely different transition component does not work 
Here is the working editor link https://stackblitz.com/edit/react-sunf9j?file=src%2Froutes%2FRouter.js

 

Thanks a lot!

[React Router 6 - Screen Transitions]

 

On 11/7/2022 at 11:44 AM, Rodrigo said:

Hi,

 

Indeed there are a few examples comming for different frameworks regarding general approaches for getting started with GSAP, Route Transitions and other cool stuff.

 

This is still a work in progress so apologies if it looks a bit sterile, but the main concept/approach is there using the latest versions of GSAP, React, Router and Transition Group:

https://stackblitz.com/edit/react-snrn5k?file=src%2FApp.js,src%2Froutes%2FRouter.js,src%2Fcomponents%2FTransition.js

 

Let us know if you have more questions and stand by for more news and examples regarding GSAP + React (NextJS/Gatsby)

 

Happy Tweening!

Hi @Rodrigo, firstly many thanks for this sample code which works great!

 

I am trying to modify your code so that I can run different animations for each page 

https://react-sunf9j.stackblitz.io
the idea is to use different <TransitionComponent> for each page, which looks like this:

const Router = () => {
  return (
    <Routes>
      <Route
        index
        element={
            <HomeTransitionComponent> // similar with <TransitionComponent> in the sample code but different gsap animation
              <HomePage />
            </HomeTransitionComponent>
        }
      />
      <Route
        path="profile"
        element={
          <ProfileTransitionComponent> // similar with <TransitionComponent> in the sample code but different gsap animation
            <ProfilePage />
          </ProfileTransitionComponent>
        }
      />
    </Routes>
  );
};
  

 

But I figured that "onExit" callback doesn't work this way and the route we are navigating to will directly appear without timeout.

Do you have any idea why using only the same <TransitionComponent> works but using multiple different components doesn't work?

I've tried to read the docs but still having a hard time understanding what's happening under the hood between <Router>, <SwitchTransition>, and <Transition> in this setup...

Thanks before!