This is a general discussion question. I think the answer is “you can’t”, but I’m curious what people think.

I’ve got some items laid out on my page as items in a flexbox.

<div class="flex grid grid-cols">
<%= for item <- @items do %>
  <div>
    <%= item %>
  </div>
<% end %>
</div>

Occasionally, the order of @items will change as a result of some server-side state change. The list will be re-ordered, but the change is immediate and jarring. I’d like this shuffling to be a smooth animation.

This seems deceptively difficult, largely because of the limitations of CSS animations - there’s no way to CSS animate a position of the list. Animating adding and removing items works well with animated opacities, but this won’t work for list reordering.

Does anybody have any thoughts on elegant solutions to this simple problem?