Jump to content
Search Community

React Router 6 - Screen Transitions

Robert M test
Moderator Tag

Recommended Posts

I have not found anything on using createBrowserRouter and loaders but this seems to work fine:

 

https://codesandbox.io/s/react-router-dom-gsap-screen-transitions-p9cp49?file=/src/index.js

( i was having a hard time with codepen, hope this is ok)

 

Also i'd love to have some kind of "Best Practice" for animating Screen Transitions with React/gsap in the learning section (Sorry for this post if i missed it).

 

  • Like 1
Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

  • 8 months later...
On 11/6/2022 at 12:26 PM, Robert M said:

I have not found anything on using createBrowserRouter and loaders but this seems to work fine:

 

https://codesandbox.io/s/react-router-dom-gsap-screen-transitions-p9cp49?file=/src/index.js

( i was having a hard time with codepen, hope this is ok)

 

Also i'd love to have some kind of "Best Practice" for animating Screen Transitions with React/gsap in the learning section (Sorry for this post if i missed it).

 

 

Thanks, this really helped me out!  I was struggling to get CreateBrowserRouter working using Framer Motion, nested Routes and Loaders which brought me back to using GSAP (which I much prefer).  I needed to call a couple of loaders on one of my routes. In case anyone gets stuck on that then this solution pointed me in the right direction

  • Like 2
Link to comment
Share on other sites

On 11/7/2022 at 3: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!

This is amazing. Have you got any more examples Rodrigo?

*edit: Also it's surprisingly smooth with my laptop struggling

Link to comment
Share on other sites

Hi @NickWoodward,

 

The idea of the demo is to provide a general structure that user can apply in order to create animated route transitions in their projects. After that the only limit is the user's imagination, just go as crazy as you want/can with GSAP! the sky is the limit.

 

There is one thing on my plate in terms of this (that applies to Vue/Nuxt as well) which is overlay transitions, but I hadn't have the time to get to that, but the setup is quite similar to this.

 

Hopefully in the upcoming weeks I'll be able to circle back to this and get it done.

 

Happy Tweening!

Link to comment
Share on other sites

20 hours ago, Rodrigo said:

Hi @NickWoodward,

 

The idea of the demo is to provide a general structure that user can apply in order to create animated route transitions in their projects. After that the only limit is the user's imagination, just go as crazy as you want/can with GSAP! the sky is the limit.

 

There is one thing on my plate in terms of this (that applies to Vue/Nuxt as well) which is overlay transitions, but I hadn't have the time to get to that, but the setup is quite similar to this.

 

Hopefully in the upcoming weeks I'll be able to circle back to this and get it done.

 

Happy Tweening!

Ah, I thought it was potentially specific to the transition. Looks great though :)

Link to comment
Share on other sites

Hi,

 

Basically the animation is created in the Transition.js file, that's where you can make the changes you want. Is worth noticing that this animates the entire content. The other idea I have that is still work in progress is to create overlay animations that is something that animates on top of the content (think like a modal) and with that section visible you change the route views without an animation and then you animate out the overlay. Hopefully I explain things better that it makes sense and that I'll be able to create that particular example ASAP.

 

Happy Tweening"

Link to comment
Share on other sites

1 hour ago, Rodrigo said:

Is worth noticing that this animates the entire content

As in because you have to put the entire route element in a TransitionCompontent / the Transition component's onEnter fn only passes you that component as a node?

Wild guess, I didn't really understand that bit tbh :)

 

1 hour ago, Rodrigo said:

The other idea I have that is still work in progress is to create overlay animations that is something that animates on top of the content (think like a modal) and with that section visible you change the route views without an animation and then you animate out the overlay.

Yeah I think I understand, like an animated curtain of sorts while the scene changes?
Why would that be beneficial? Because it wouldn't be as tied to routes or something?

 


 

Link to comment
Share on other sites

2 hours ago, NickWoodward said:

As in because you have to put the entire route element in a TransitionCompontent / the Transition component's onEnter fn only passes you that component as a node?

Kind of, the Transition component renders a clone of the element in order to have access to the actual DOM node in the different JS hooks exposed by it's API:

https://reactcommunity.org/react-transition-group/transition

https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js

 

2 hours ago, NickWoodward said:

Why would that be beneficial? Because it wouldn't be as tied to routes or something?

You can tie it to the routes using the same approach or you can use a layout, show the overlay, change the route programmatically and then hide the overlay. Some users could find animating the entire content a bit weird or that it looks odd, ugly, etc., just a matter of personal preferences actually.

 

Happy Tweening!

Link to comment
Share on other sites

  • 4 months later...

 

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!

Link to comment
Share on other sites

Hi @Alvaro L,

 

Unfortunately the link you provide is not for the editable part of the Stackblitz, but for the full screen view, not a lot we can do there.

 

Also this is more about configuring React and React router more than a GSAP thing. What you can do is pass a prop to the transition component with the animation configuration you want to use on a particular route, something like this:

// Accept a config prop with the initial state, enter and leave animation configs
const TransitionComponent = ({ children, config }) => {
  const location = useLocation();
  const { toggleCompleted } = useContext(TransitionContext);

  return (
    <SwitchTransition>
      <Transition
        key={location.pathname}
        timeout={500}
        onEnter={(node) => {
          toggleCompleted(false);
          // Set initial state here based on the config prop
          gsap.set(node, { ... });
          gsap.timeline({
            paused: true,
            onComplete: () => toggleCompleted(true),
          })
            // create animation instances here based on the config prop
            .play();
        }}
        onExit={(node) => {
          gsap.timeline({ paused: true })
            // create animation instances here based on the config prop
            .play();
        }}
      >
        {children}
      </Transition>
    </SwitchTransition>
  );
};

Then in your router file you can do this:

const Router = () => {
  return (
    <TransitionProvider>
      <Routes>
        <Route
          index
          element={
          <TransitionComponent config={{
            start: {...},// config for the initial state
            enter: {...},// config for the enter animation
            exit: {...},// config for the exit animation
          }}>
            <Boxes />
          </TransitionComponent>
          }
        />
        <Route
          path="/scroll"
          element={
          <TransitionComponent config={{
            start: {...},// config for the initial state
            enter: {...},// config for the enter animation
            exit: {...},// config for the exit animation
          }}>
            <Scroll />
          </TransitionComponent>
          }
        />
        <Route
          path="/layers"
          element={
          <TransitionComponent config={{
            start: {...},// config for the initial state
            enter: {...},// config for the enter animation
            exit: {...},// config for the exit animation
          }}>
            <Layers />
          </TransitionComponent>
          }
        />
      </Routes>
    </TransitionProvider>
  );
};

Right after I posted the answer I thought of another alternative, you can check for the path directly on the Transition component without the need of a config prop.  Since we are already using the useLocation hook, you can create a global config object for the initial state and animations for each route and depending on that you can use a specific config depending on the route:

const transitionConfig = {
  "/": {
    initial: {},
    enter: {},
    exit: {},
  },
  "/scroll": {
    initial: {},
    enter: {},
    exit: {},
  },
  "/layers": {
    initial: {},
    enter: {},
    exit: {},
  },
};

const TransitionComponent = ({ children }) => {
  const { pathname } = useLocation();
  const { toggleCompleted } = useContext(TransitionContext);

  return (
    <SwitchTransition>
      <Transition
        key={pathname}
        timeout={500}
        onEnter={(node) => {
          toggleCompleted(false);
          gsap.set(node, transitionConfig[pathname].initial);
          gsap.timeline({
            paused: true,
            onComplete: () => toggleCompleted(true),
          })
            .to(node, transitionConfig[pathname].enter)
            .play();
        }}
        onExit={(node) => {
          gsap.timeline({ paused: true })
            .to(node, transitionConfig[pathname].exit)
            .play();
        }}
      >
        {children}
      </Transition>
    </SwitchTransition>
  );
};

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

  • 2 weeks later...

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 :D
Here is the working editor link https://stackblitz.com/edit/react-sunf9j?file=src%2Froutes%2FRouter.js

 

Thanks a lot!

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

@Rodrigo Thanks for providing this approach for page transitions in React I'm finding it really helpful in my learning. I was wondering is there a simple way to make it execute the enter and exit transitions at the same time? That's the part I can't figure out as it seems to have to run the exit first, then run the enter transition. Thanks!

Link to comment
Share on other sites

Hi @JLernDesign,

 

The demo we're using uses React Transition Group's SwitchTransition component:

https://reactcommunity.org/react-transition-group/switch-transition

 

This component as you can see in the docs has an out-in mode by default which means the element being unmounted is animated out and then the element being animated in is mounted before the animation starts:

https://stackblitz.com/edit/react-6rzfpp?file=src%2Fcomponents%2FTransition.js

 

Maybe you can replace the SwitchTransition component with the TransitionGroup one, that should work the way you expect:

https://reactcommunity.org/react-transition-group/transition-group

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

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

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

Hello! It’s great to see your enthusiasm for GSAP, React, and route transitions. 😊

The StackBlitz link you shared provides simple examples for setting up animated page transitions in React using GSAP, React Router, and React Transition Group. It’s an excellent starting point for anyone diving into this exciting combination of technologies. The main concept is there, even if it’s a work in progress.

For those interested, the link demonstrates how to create smooth transitions between different routes in a React app. By leveraging GSAP’s animation capabilities and integrating them with React Router and React Transition Group, you can achieve delightful page transitions.

If you’re looking for more examples or have questions, feel free to explore the provided link. And stay tuned for additional news and examples related to GSAP + React (NextJS/Gatsby)!

Happy tweening! 🚀🎉

Link to comment
Share on other sites

Hi @Tracker23 and welcome to the GSAP Forums!

 

Thanks for the kind words, is great when users appreciate the work we put up in GSAP! 💚

 

However the link you shared is from a really old test setup that even uses class components. You should rather concentrate in the demos in our Stackblitz React collection since those are up-to-date GSAP and React wise.

 

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...