I’m working on an interface in which I want to create a grid of content cards that automatically animates a reshuffle when a card is added or removed.
By reshuffle I mean that if a card is subtracted at top left of the grid, the other cards will reshuffle to fill the open slot. Or if a card is added, all cards will shuffle down one slot to accommodate it.
I’m not sure that this is possible in Axure (and have been trying various strategies to get it to work. Has anyone got any ideas for how to make this work?
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.
