Here's a rough draft proposal for an extension to the animated
component that can handle both simple and advanced FLIP use cases.
Initiate a FLIP animation on a component by updating the flipKey
prop.
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.
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
.
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.
- Think about improving or simplifying
flipId
/flipKey
/flipSet
api. - Figure out chained staggering of FLIP components and/or whether it is necessary (react-flip-toolkit supports it).
- 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 aFlippableAnimated
component or similar?) - 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.
A few of my initial thoughts on the API direction:
animated
components yet, and we should keep avoiding that, IMO.useSpring
props API as much as possible, for familiarity and flexibility's sake.<FlipContext>
component to let users decide where flipped components are rendered whilst flipping, which is especially important for multi-parent flips.If we follow these constraints, I think a lot of our decisions will come naturally. For example, chaining of FLIP animations can be achieved with
useChain
, and auseFlip
hook would be easy to tree-shake out for users that don't need it.With all that said, here's a first draft of what a hook-based API might look like:
Flipping reordered children
Flipping between parents
Still thinking about this one. Open to suggestions!
I think the
to
andfrom
props could work wonders here. For example, passing the equivalent of aflipId
touseFlip
would make the returned<Flip>
component animate its child using the styles of theflipId
element as either itsfrom
orto
values, depending on which prop you defined.In the example above,
childB
would animate fromchildA
styles to its own styles.Btw, we could also export a
<Flip>
component that has the same API asuseFlip
.