Page Transitions with react-motion (or something else)

[derpoho]

While fiddling around with the fabulous remix and checking the "must-be-solved" checkboxes for our agencys workflow i came to page transitions with react-motion (or anything else).

Is there any solution for transitions between routes?
The searches i did didn't solve the problem yet.

The AnimatePresence thing from react-motion has no effect if used like all the tutorials describe it.

Anybody got any guidance on this?

[hollandThomas]

https://twitter.com/buildsghost/status/1492201302423605252

[ccssmnn]

Just to add a little more context to the tweet, provided by @hollandThomas

You can use the useOutlet-Hook from React Router (docs). For convenience, you can directly import it from Remix, but the documentation lives at React Router. When you navigate with <Link/>, Remix handles navigation by replacing the children. You can get the current outlet with useOutlet and wrap it in an animation component. (e.g. Framers AnimatePresence

[ryanflorence]

Typically the way animation libs work is they capture the previous renders and render them during the transition, so you need a way to "capture" the old context for the page that's animating out. You can do it like this:

function StaticOutlet() {
  let [element] = useState(useOutlet());
  return element
}

Now your element won't read from the new context on the "out" transition.

[QuentinWidlocher]

When using useOutlet() to animate a transition inside a layout route, and going to a route from a route using useLoaderData(), my app crash with this error

Error in the browser console

Here repo.tsx:18 points to the useLoaderData()

Uncaught TypeError: (intermediate value)() is undefined
    ReposRoute repos.tsx:18
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 5
    onChange components.js:57
    update transition.js:109
    loadPageData transition.js:788
repos.tsx:18:17
    ReposRoute repos.tsx:18
    React 11
    performSyncWorkOnRoot self-hosted:1222
    flushSyncCallbackQueueImpl React
    unstable_runWithPriority scheduler.development.js:468
    React 5
    dispatchAction self-hosted:1279
    onChange components.js:57
    update transition.js:109
    loadPageData transition.js:788
    AsyncFunctionNext self-hosted:692

If I remove the useLoaderData(), the error disappear and the transition works well.

Any idea why ?