2

I am creating a card game where i want to animate a shuffle.

Imagine there are 5 cards on a table:

A B C D E

I want function that takes 1 of the cards and inserts it in a new position. e.g insert(D, 1) will insert the D card in position 1 resulting in:

A D B C E

I am currently doing this easily using flexbox, I can simply set a ordering for each div using the css attribute order. But flexbox does not support animation. I would like to be able to animate D, moving above all the cards and getting inserted between A and B.

I have seen solutions where the divs/cards are draggable but that is not what I want. I want to show each step of the shuffle programatically. I have also seen solutions that 'hardcode' the animation like this: http://jsfiddle.net/uNv8C/ but i can have any number of cards (reasonable number 52)

Any pointers would be very helpful. I looked at jquery sortable, but did not see a way to use it here - could be be used here?

A.D
  • 1,480
  • 2
  • 18
  • 33
  • I suggest checking out css animations or animation libraries for javascript. There's a whole mess of options out there. Javascript libraries might be a bit heavy handed for that simple of an animation. You could do it with jquery, but generally I avoid Jquery for any sort of animation with games as it's not very efficient and bogs down pretty quickly. – Araymer Dec 22 '15 at 03:27
  • I've heard that http://greensock.com is pretty good for an animation library. Perhaps you could experiment with that library? – Clomp Apr 08 '16 at 16:26

0 Answers0