Page transitions in React with Highway

[virtualbis]

Hello,

I am just testing out the page transitions and am running into errors, even when I use the example in https://highway.js.org/examples/transitions.html

It is showing "TypeError: Cannot read property 'getAttribute' of null"

 

Here is a link to my code: https://codesandbox.io/s/quirky-northcutt-bilpx

 

Any idea what I am doing wrong?

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

It seems that Highway doesn't work with React or Vue, as mentioned in this issues:

 

https://github.com/Dogstudio/highway/issues/50

https://github.com/Dogstudio/highway/issues/64

 

For route transitions in React I'd recommend using React Transition Group, which basically delays the mount/unmount process of the components allowing you to add animations to such events.

 

Happy Tweening!!!

 

[virtualbis]

Ok, that makes sense. I've uploaded our mini project here: https://stackblitz.com/edit/github-iyuybb?file=src/App.js

 

Please keep in mind I'm pretty new to React as well. In the app.js file you can see how I have included the components. Where would I begin to use React Transition Group? 

[virtualbis]

This is my app.js. Not sure how to even begin a page transition

 

import React, { useState } from "react";
//Adding Components
import Home from "./Components/Home";
import Game from "./Components/Game";
import Myp from "./Components/Myp";
import Tutorial from "./Components/Tutorial";
//Import Styles
import "./styles/app.scss";

function App() {
  const [pageStatus, setPageStatus] = useState(1);
  return (
    <div className="App">
      <section>
        {(() => {
          switch (pageStatus) {
            case 1:
              return (
                <Game pageStatus={pageStatus} setPageStatus={setPageStatus} />
              );
            case 2:
              return (
                <Tutorial
                  pageStatus={pageStatus}
                  setPageStatus={setPageStatus}
                />
              );
            case 3:
              return (
                <Myp pageStatus={pageStatus} setPageStatus={setPageStatus} />
              );
            default:
              return (
                <Home pageStatus={pageStatus} setPageStatus={setPageStatus} />
              );
          }
        })()}
      </section>
    </div>
  );
}

export default App;