FLIP-style animations
Discussed briefly in https://github.com/drcmda/react-spring/issues/5#issuecomment-378661614, but it would be nice if react-spring could calculate the to/from states if not explicitly provided, similar to react-flip-move which uses the FLIP technique (ultimately getBoundingClientRect)
For example, in react-move you can do this (just by changing the class/styles on the items, they "react")
<FlipMove className="items"
duration={350}
staggerDurationBy={20}
staggerDelayBy={20}
>
{items.map(item => (
<div
className={item.key === selected ? "item selected" : "item"}
onClick={() => this.selectItem(item.key)}
key={item.key}>{item.key}</div>
))}
</FlipMove>Here is the discussion I had with the author of react-flip-move while creating this - https://github.com/joshwcomeau/react-flip-move/issues/69
A similar thing could probably be done like react-morph which is useful to morph shared elements between route states (like Android does a good bit with it's material design
Maybe if you do not provide a from/to to <Transition> it calculates the top/left/width/height automatically (or just diffs the styles and lets the spring transitions them). With flip you apply them, capture the styles, then invert them.
Anyways, I don't have any specific need right now, but thought it was worth having a conversation. Thanks again for the awesome library.
Source: pmndrs/react-spring