Looking to animate my route changes (fade-to-black type thing)
How would I go about this with the router? Is it compatible with framer-motion or other established patterns of achieving this? If not, how might you implement animated route changes?
I tried looking for examples online and ultimately came up empty handed.
2 Replies
dependent-tan•14mo ago
We have a framer motion example in the project repository
https://github.com/TanStack/router/tree/main/examples/react/with-framer-motion
https://stackblitz.com/github/TanStack/router/tree/main/examples/react/with-framer-motion
I think this'd be what you are looking for.
You can ofcourse use something like the
useRouterState to check the pending status. Or even the <MatchRouter> component as well.GitHub
router/examples/react/with-framer-motion at main · TanStack/router
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
StackBlitz
Router With Framer Motion Example - StackBlitz
Run official live example code for Router With Framer Motion, created by Tan Stack on StackBlitz
ambitious-aquaOP•14mo ago
Amazing. This is perfect.