React-Motion: click to front

React-Motion: click to front

Go to Source

See the Code
See it Full Page
See Details

A proof-of-concept of a React-based interface idea I had. Click on any square to make it spring to the top left-most position in the grid and force all other squares to adjust appropriately. Most of the real work here is done by React-Motion; the rest is just a tiny bit of math.

The code is commented, and the code isn't terribly long anyway, so I hope it's somewhat digestible to anyone looking to pick it apart. Essentially: we use each square's index in an array to calculate what resting position it should have; we attach an onClick method to each square that moves the clicked square to index 0 in the array (without mutating the old array); and finally, we tell React-Motion to animate any changes in position for us.

If you're interested in learning more about Cheng Lou's awesome React-Motion project, you can [check it out here]( on GitHub.

This Pen uses: HTML, SCSS, Babel, and Babel