Routeveil adds shared-element transitions to React Router with async and lazy route support
An open-source library called Routeveil has released a new feature enabling shared-element transitions for React Router-based applications. The update allows UI elements such as images, cards, and headings to visually morph from one route into their counterpart on the destination route, rather than simply disappearing and reappearing. Routeveil manages the process by capturing the source element's position and dimensions, creating a temporary clone as a visual bridge, and waiting for the destination element to render before animating. The engine handles edge cases including lazy-loaded routes, asynchronous content, off-screen targets, and interrupted navigations, then cleans up all temporary layers automatically. Developers can implement the feature by wrapping matching elements on both routes with the RouteveilSharedElement component and assigning them a shared name.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)
Log in to join the discussion and vote.
Log in