I’m working on an on-off switch which, when hovered, expands into 16 equally spaced squares, and when enabled/disabled, each column of squares moves to the other side with a different delay and different curve for each column. The only way I could figure out how to create the hover effect was to make a grid layout from constrained-by-parent columns containing the squares inside an absolute row layout (it being absolute so that the grid stays centered on the left when it expands), and then animating the horizontal and vertical padding to equally space them. The problem I have run into is that when turning on the switch, the only way I found to move the columns individually is to set them to absolute, and if I set them to absolute, when I padding the row layout it can’t move the columns.
In the attached image you can see the first issue i run into when setting it to absolute.
Here is the image of the intended look when hovered.
