Using Tanstack Router Link with Framer Motion

[KirillTregubov]

A couple months back I needed to animate a Link with Framer Motion. I have struggled with the implementation; trying both the createLink and LinkOptions APIs. I think I have finally landed on a version others might find good.

Note: I will simplify this when React 19 releases to remove the forwardRef.

EDIT: my method didn't work. Here's a good enough version that has the wrong ref:

import { createLink } from '@tanstack/react-router'
import { motion } from 'framer-motion'

export const MotionLink = createLink(motion.a)

I scoured the internet looking for someone else's implementation of this. Hopefully it helps! Please let me know what you think of this approach, any feedback or criticism is welcome!

[SeanCassiere]

We've recently added docs on using custom link components with TSR. You'll likely need to adapt some of it to work with framer-motion.
https://tanstack.com/router/latest/docs/framework/react/guide/custom-link

If you run into any trouble, pop-in to our Discord. Things tend to get a bit lost over here 😅.

And if it works, consider maybe adding it to the documentation 👀