Animations and persistence of components on route changes

[city17]

🚀 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.

[joshuaellis]

I've had a chance to take a little look at the implementation in framer-motion to understand how we might approach it.

I think we'd need a way to understand what Animated elements are within the react tree, get their associated Controllers and then activate the animation attached on event X. I think this component would only work with the useSpring(s) hook... I guess the second part is understanding when to trigger the Controllers and identifying said animated components.

However, currently I don't believe Animated components have associated Controllers. They're merely a vessel for Controllers to manipulate... 🤔

[sandren]

This would be really helpful for completing animations that begin before a route change as well. For example if clicking a link within a slide-out menu automatically closes the slide-out then the user will never see the closing animation because the route change will cut it short.

[HQ92]

Is this feature still being planned? It would be very useful and would stop people from having to roll their own FLIP implementation to replicate this if they want to use react-spring for animations over Framer Motion

[joshuaellis]

Is this feature still being planned? It would be very useful and would stop people from having to roll their own FLIP implementation to replicate this if they want to use react-spring for animations over Framer Motion

It's something i'd like to add, just at the moment my attention has been focussed on our documentation & react18.