Requesting assistance on figuring out how to get grid animation working

[sghall]

Requesting assistance on figuring out how to get grid animation working

[sghall]

You could do this with react-move but you would have to calculate the layout for the grid items on each update. Just swapping classes is not going to work.

You might want to look at:
https://github.com/STRML/react-grid-layout

[amaidah]

Hmm I see. Thanks for the quick reply.

Can you expand on what you mean by calculating the grid?

I will take a look at react-grid thanks.

[sghall]

You could use absolute positioning and calculate the new coordinates for each cell on each update and let react-move interpolate from the old layout to the new one.

You can see how that works for an x, y coordinate in this example (second example on the NodeGroup docs page):
https://github.com/react-tools/react-move/blob/master/docs/src/routes/documentation/NodeGroup/Example2.js#L92

Uses the CSS translate prop:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate