Provide an explicit prop to disable the animation ?

[yched]

I needed to temporarily disable flip animations based on certain conditions (namely, my flip-enabled list is drag-n-drop reorderable, and the animations are a bit jarring when the user is dragging an item from one place to another).

I struggled a bit to find a way to do that (tried removing the <Flipped> wrappers around each item altogether, which was very inefficient of course: full remounting of the whole react tree below the list, noticeable lag on large lists), before finding out that setting flipKey to null (or better, false) does exactly what I wanted

Turns out the flipKey prop is indeed documented as "required, string | number | bool", but the effect of setting to false (or true, for that matter ?) is not clearly explained.

Other than that, thanks a ton for the package !

[yched]

Yeah, I'm stupid - of course, setting flipKey to any constant value will prevent subsequent animations 😅
Not the discovery of the century, but I guess maybe it could still be a bit more explicit in the doc that it's a trick that can be used to disable animations ?

Also, I had to take extra steps so that this "constant flipKey value"(e.g false) is in place before any change in the order happens.
Otherwise, going from " items 1,2,3" to "items 2,3,1 but do not animate please" means flipKey changing from '1-2-3' to false, and thus would still trigger an animation.

Thus, maybe it would be handy to have a separate disableFlip boolean prop, that would disable animations regardless of whether flipKey has changed ?

[aholachek]

Hey, thanks for bringing up this use case. It seems like it could be fairly common. An alternate solution is to use the shouldFlip method on the Flipped component to return false, though depending on how many Flipped components you're rendering that could get annoying.

I will definitely consider adding a shouldFlip prop to the parent Flipper component as you suggest.

[yched]

Using shouldFlip does seem to work, but has the drawback of needing to apply the prop in each item, and they can be located at an arbitrary depth lower in the React tree.

Also, not sure it fully works when adding to that mix inversed Flipped and items having their own nested Flipper-enabled list, I'm still seeing some stray animations at the beginiing of my drag-n-drop operaions even after setting shouldFlip = () => !dragnDropOngoing

A single killswitch at the Flipper level sounds easier indeed 👍

[jlarmstrongiv]

A shouldFlip or disabled prop at the Flipper level would be great. It’s needed for accessibility to support users who prefers-reduced-motion

[aholachek]

Hey @jlarmstrongiv, thanks for raising that. I just made a quick release to make sure no animations occur when the user has prefers-reduced-motion on: https://github.com/aholachek/react-flip-toolkit/releases/tag/v7.1.0

[jlarmstrongiv]

Thank you @aholachek 😄