I would like to create a layout using HTML 5, CSS, jQuery (animate) like the following: https://i.stack.imgur.com/kBpAJ.jpg. I would like to animate the transition between multiple arrangements of the tiles. For example between a set of tiles or boxes like this to a similar set of boxes or tiles likethis https://i.stack.imgur.com/DKHjL.jpg. (For purposes of illustration the second image is just a rotation of the first, but we We can expect any combination and organization of the boxes/tiles).
The animation should be triggered by a button press and should be reusable since there are potentially an infinite number of ways to organize the boxes. I want the transition to work like this: each box moves off towards the right side of the screen on an independant path while the new boxes move in from the left on their own independant paths. I would like the entire animation to be constrained to its own div so that it doesn’t interfere with other elements on the page (navigation bars etc). A final constraint is I want this to work in most modern browsers (and ideally IE 8 and 9 as well).
What is the most graceful way to markup the boxes (both sets)? What is a good animation function?
I’d start by having a look at Isotope, it has lots of sorting and animations for grid-based content.
Check out the demos, especially the part about adding elements. It seems to be the effect you’re going for.
You might need to “trick” it to look like your proposed layout by adding empty/transparent items.