flip.md

Here's a rough draft proposal for an extension to the animated component that can handle both simple and advanced FLIP use cases.

Example usage

1. Simplest example

Initiate a FLIP animation on a component by updating the flipKey prop.

Demo

Code

2. Two different components example

Match unconnected components across renders by making sure they share the same flipId prop, and when one unmounts and the other mounts, they will be connected with a FLIP animation.

Demo

Code

3. Advanced custom spring example

Occasionally, like in the example below, users will want to be able to FLIP pre-existing springs, if for instance a FLIP could be interrupted by a drag. The api allows for this as well, by passing in a flipSet prop in addition to a flipKey or flipId.

(Rough) demo

Code

Proposed extension to animated component

This is a first draft of the code wrapping the animated component to make the above three use cases possible. The AnimationHandler outer wrapper attempts to simplify the most common use cases. However, if you pass in the flipSet prop you can bypass this to get total control of the animation to facilitate interruptability and more complex effects.

Code

To do:

1. Think about improving or simplifying flipId/flipKey/flipSet api.
2. Figure out chained staggering of FLIP components and/or whether it is necessary (react-flip-toolkit supports it).
3. Figure out how to lazily import FLIP functionality into animated so as not to bloat the bundle for users who don't need FLIP. (or perhaps just have a FlippableAnimated component or similar?)
4. Make the springs customizable for abstracted FLIP cases (like examples one and two). this would be easy with a flipSpring prop or something but that might start making the api too complex.

Built a really simple example.

Works only with context parent "Flip"
And functional component "FlipItem" which just renders an animated div and registers itself in the context.
Runs useLayoutEffect every update and if their DOMRects normalized against where they would be with no transform (this is important) then they wont animate.
Uses matrix math (scale is useless just there as a placeholder).

There might be some drag-and-drop logic floating around because i had to rip my dnd stuff out of this implementation to just show the flip stuff but my real-world usecase for flip is more for drag-and-drop.

What iv'e learnt:
Must compute position logic as if transforms aren't applied.
Can't really use the inbuilt animated.div myself without forking react-spring but ideally it would just be animated.div id="xyz"
Must use context to provide seemless multi-parent transitions.
Can use either useLayoutEffect OR getSnapshotBeforeUpdate
Doesn't animate height/width to keep it simple however this would be very easy to add

https://codesandbox.io/s/drag-and-drop-spring-i6tse

EDIT: My drag-and-drop implementation utilizing flip is almost done but haven't had time to work on it but the only thing missing is multi-container drop. Implementing flip you can build drag-and-drop without ANY position math for moving elements around.