How to use react-spring parallax with ChakraUI

Question

I found that my code that use react-spring parallax and Tailwind doesn't work with ChakraUI. I have a website made with ChakraUI, and today I want to make it better. I create an empty project and then create Landing Page with react-spring/parallax and it work fine. Now I need to move it to my main website. More or less it look like this:

function App() {
  const [isMobile] = useMediaQuery("(max-width: 768px)");
  const [isTablet] = useMediaQuery("(max-width: 1256px)");
  const { isLoading, error } = useAuth0();
  return (
    <Flex>
      <BrowserRouter>
{/*Some code for the Navigation Panel*/}

        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route
            path="/dashboard"
            element={!error && !isLoading ? <Dashboard /> : <Navigate to="/" />}
          />
          <Route path="/subscription" element={<Subscription></Subscription>} />
          <Route path="/pembahasan" element={<Pembahasan />} />
        </Routes>
      </BrowserRouter>
    </Flex>
  );
}

export default App;

It has navigation bar that can be used to routes across the web page. It looks like this:

Each routes point to each page that I put in different jsx file. I change the home page to my new design and it's blank:

I try to see the html at browser and get:

It didn't got selected when I clicked on it

I don't even get any error message or something. I have made sure that I already installed every new component. I also have Tailwind installed. My first assumption is: this caused by the navigation bar. Then I try to delete it, and leave only the Parallax but it still doesn't work.

No error occur in console or in terminal, but the content doesn't shows up.

I think this is because the react-spring library doesn't work well with ChakraUI. Anyone has experience working with react-spring and ChakraUI? Or anyone have any idea why this is happen or how to use react-spring with ChakraUI?

EDIT: After some check, I found that enabling cause my component not shown. Am I mis some step? anyone know how to solve this?

Answer 1

So after some research I found that Chakra UI compatible with Framer Motion, and it's not a good idea to use react-spring here, after all Framer Motion is less bloat compare to react-spring