Tinder Cards stacking issue


#1

I’ve implemented the Tinder Cards code and it’s working fine. However, I can’t seem to stack the cards correctly. The attached images show the cards stacking. I think the array is 27 items, I’m using it to show images of an employee directory. After I go through the items initially, then all stack correctly and the spring animations work (the animations are screwy until the cards are swiped one complete rotation). The first image is after the one cycle of the entire cards array, the second is the initial rendering.
Any ideas or explanation what’s going on? I’ve never created a code pen but will try to for this issue.


#2

I’ve edited the codepen for this ion and added about 20 duplicates into the cardTypes array and they do stack in the same manner. So I’m assuming this is intended behavior.

However, I still have issues with the animation, I have collide.js included. The animations don’t work properly until one complete cycle of cards. Then the spring animation starts working correctly.


#3

@bradmartin I suggest you open an issue here: https://github.com/driftyco/ionic-contrib-tinder-cards

You can see it is WIP.