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!
