Moving card animation - adding and subtracting cards from a grid

@JTB,

You can do the “reshuffling” part easily enough with a repeater list. You can either delete a repeater row (your “top left card” or “slot”) or filter the repeater to hide that row (card.) Read up on repeaters in the Axure reference documentation here:

However, this will be fairly immediate, so it won’t appear with a visual effect of “reshuffling a deck” or showing cards in the grid slowly moving to a new slot. How important is the animation part? Let me know–it might be fun to figure out how to animate this in a repeater.

A number of years ago I had to manually build something like this in Axure 6 (I think it was before 7 and repeater widgets) and it was a fair bit of work to figure it out but ended up fairly straightforward. Essentially, each card is responsible for moving the next card in the list. So, if it were removed (hidden) it would move the “n+1” card with something like OnHide move NextCardWidget to ([[This.x]], [[This.y]]) with a linear animation of say, 300 ms.

You might be able to fake this animation in a repeater with some creative OnItemLoad code… Hmm… maybe have a second hidden “card” for each slot that gets set to the previous row’s contents then shows itself and slides out of place, as if it were moving “up” one slot…meanwhile, the “real” card could then move into place.

Here are some recent threads on doing something like this to fake one repeater item moving with a drag from one position to another. You might be able to leverage from this.