I made React Router elements morph between routes
 |
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: 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 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:
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: shared-elements demo: npm: 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 🙂 submitted by /u/Green-Spinach2061 |
