Animations and persistence of components on route changes

🚀 Feature Proposal

The ability to animate (and persist) components during route changes.

Motivation

Currently it's not possible (or difficult) to animate components during a route change, but I think it's a very relevant use case. This would help making smooth animated transitions of specific components between pages.

Framer Motion currently has something similar implemented with AnimateSharedLayout. This is a wrapper, which allows you to give components on different pages the same ID, which signifies that this is the same component and that it will animate any differences between the first component (found on the original route) and the re-rendered component (on the new route).

Example

For example, assume you want to animate the transition from a grid with many products to a page containing a single product. When a user clicks on one product of the grid, you want to take that image, and scale it to large size, as if it's being zoomed in/focused on.

To achieve this the image component needs to persist during the route change, or at least react-spring needs to be told what the equivalent component is on the new route. Then the two components may be compared and any differences in properties animated.

Demo

A practical demo example how this would look like can be found here (click the Do It button). There's also a related tutorial that explains how this effect works with Framer Motion.

Start by reviewing the issue's proposed route-change animation behavior and the linked Framer Motion example and tutorial. The payload names no repository files, tests, or entry points, so the implementation location and a concrete definition of done still need to be established.