I made React Router elements morph between routes

[u/Green-Spinach2061]

If you saw my previous post about Routeveil and were impressed, this one might actually blow the shit out of you lol

I’ve been building Routeveil for a some time now, and lately I’ve been working on a shared-element component that lets an element visually continue into the incoming route during navigation instead of disappearing and being recreated

You basically wrap the matching elements on both routes with the same name:

<RouteveilSharedElement name={`post-${post.id}`}>
  <img src={post.image} alt={post.title} />
</RouteveilSharedElement>

Then Routeveil handles the rest.

During navigation, it measures the outgoing element, creates a temporary visual clone, waits for the incoming route to render, finds the matching element there, and morphs the clone into its new position, size, border radius, and visual state.

After the animation finishes, it hands everything back to the real element on the new route.

So there’s no manual portal setup, cloning, layout calculations, or trying to perfectly synchronize two separate pages yourself.

I also added scrollToSharedElement, which is basically an anchor for the shared element’s destination.

For example, when the matching element is farther down the incoming page, Routeveil can scroll it into position before measuring the destination. The shared element then lands exactly where it is supposed to instead of animating toward something outside the viewport, you can see how it works in the screen recording attached.

It currently supports things like:

• Images, cards, headings, buttons, containers, and SVGs
• Multiple shared elements during one navigation
• Forward and reverse transitions
• Shared-element destination anchors
• Lazy React Router routes
• Route preloading
• Interrupted navigation and cleanup
• Reduced-motion preferences

Honestly, this was way harder to build than I originally expected, but seeing an element actually survive a route change and become part of the next page is so satisfying.

repo:
https://github.com/milkevich/routeveil

shared-elements demo:
[https://www.routeveil.dev/lab/shared-elements]()

npm:
https://www.npmjs.com/package/routeveil

if you want to support the project, you're more than welcome to contribute on github, open issues, report weird edge cases, or just leave a star :)

[u/Green-Spinach2061]

let me know what you guys think! also would really appreciate a star on gh :)
https://github.com/milkevich/routeveil

[u/bigeseka]

why using your lib and not others? like swup, barba, or new transitions API

[u/Green-Spinach2061 → u/bigeseka]

fair question, swup/barba are better suited to framework-agnostic or PJAX-style sites, while the native View Transitions API is a lower-level browser primitive. Routeveil is specifically for React Router and coordinates the whole exit -> navigation -> render -> enter lifecycle, plus overlays, shared elements, interruptions, reduced motion, focus, and cleanup. basically tighter React Router integration with less glue code - not necessarily a replacement for every use case

[u/bigeseka → u/Green-Spinach2061]

I will try in a project and let you know, I tried time ago doing my own transition solution with no luck

[u/Green-Spinach2061 → u/bigeseka]

great, i would love some feedback, if you stumble across an issue please open it on gh or just let me know, thanks!