Effect Ideas for Card Stacks

Today we’d like to share some inspiration for card effects with you. The idea is to animate the top element of a stack by clicking on an accept or reject button. We’ve used this Tinder-like example to show some symmetric and complementing pairs of effects, but these kind of animations can fit into many scenarios involving all kinds of card stacks that don’t necessarily have a dual logic.

The markup for a stack and its controls looks like this:

<ul id="stack_yuda" class="stack stack--yuda">
	<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
	<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
	<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
	<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
	<li class="stack__item"><img src="img/5.png" alt="Tree 5" /></li>
	<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
</ul>
<div class="controls">
	<button class="button button--sonar button--reject" data-stack="stack_yuda">
		<i class="fa fa-times"></i>
		<span class="text-hidden">Reject</span>
	</button>
	<button class="button button--sonar button--accept" data-stack="stack_yuda">
		<i class="fa fa-check"></i>
		<span class="text-hidden">Accept</span>
	</button>
</div>

With all the stack items positioned absolutely on top of each other, we apply a “accept” or “reject” class to the current item, depending on which button we clicked.

For this demo we’ve implemented a little plugin that takes care of the functionality. We use dynamics.js by Michael Villar as animation library. The animations for moving the items away (accept/reject) are defined as CSS animations in the stylesheet.

The plugin has the following options:

Stack.prototype.options = {
	// stack's perspective value
	perspective: 1000,

	// stack's perspective origin
	perspectiveOrigin : '50% -50%',

	// number of visible items in the stack
	visible : 3,

	// infinite navigation
	infinite : true,

	// callback: when reaching the end of the stack
	onEndStack : function() {return false;},

	// animation settings for the items' movements in the stack when the items rearrange
	// object that is passed to the dynamicsjs animate function (see more at http://dynamicsjs.com/)
	// example:
	// {type: dynamics.spring,duration: 1641,frequency: 557,friction: 459,anticipationSize: 206,anticipationStrength: 392}
	stackItemsAnimation : {
		duration : 500,
		type : dynamics.bezier,
		points : [{'x':0,'y':0,'cp':[{'x':0.25,'y':0.1}]},{'x':1,'y':1,'cp':[{'x':0.25,'y':1}]}]
	},

	// delay for the items' rearrangement / delay before stackItemsAnimation is applied
	stackItemsAnimationDelay : 0,

	// animation settings for the items' movements in the stack before the rearrangement
	// we can set up different settings depending on whether we are approving or rejecting an item
	stackItemsPreAnimation : {
		reject : {
			// if true, then the settings.properties parameter will be distributed through the items in a non equal fashion
			// for instance, if we set settings.properties = {translateX:100} and we have options.visible = 4, 
			// then the second item in the stack will translate 100px, the second one 75px and the third 50px
			elastic : true,
			// object that is passed into the dynamicsjs animate function - second parameter -  (see more at http://dynamicsjs.com/)
			animationProperties : {},
			// object that is passed into the dynamicsjs animate function - third parameter - (see more at http://dynamicsjs.com/)
			animationSettings : {} 
		},
		accept : {
			// if true, then the settings.properties parameter will be distributed through the items in a non equal fashion
			// for instance, if we set settings.properties = {translateX:100} and we have options.visible = 4, 
			// then the second item on the stack will translate 100px, the second one 75px and the third 50px
			elastic : true,
			// object that is passed into the dynamicsjs animate function - second parameter -  (see more at http://dynamicsjs.com/)
			animationProperties : {},
			// object that is passed into the dynamicsjs animate function (see more at http://dynamicsjs.com/)
			animationSettings : {}
		}
	}
}

And this is an example for the reject/accept action effect:

/***********************************************/
/******************** yuda *********************/
/***********************************************/

.stack--yuda .stack__item--reject {
	-webkit-animation: yudaReject 0.5s forwards;
	animation: yudaReject 0.5s forwards;
}

@-webkit-keyframes yudaReject {
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 200px, 0);
		transform: translate3d(0, 200px, 0);
	}
}

@keyframes yudaReject {
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 200px, 0);
		transform: translate3d(0, 200px, 0);
	}
}

.stack--yuda .stack__item--accept {
	-webkit-transform-origin: 50% 300%;
	transform-origin: 50% 300%;
	-webkit-animation: yudaAccept 0.5s forwards;
	animation: yudaAccept 0.5s forwards;
}

@-webkit-keyframes yudaAccept {
	to {
		opacity: 0;
		-webkit-transform: rotate3d(0, 0, 1, 20deg);
		transform: rotate3d(0, 0, 1, 20deg);
	}
}

@keyframes yudaAccept {
	to {
		opacity: 0;
		-webkit-transform: rotate3d(0, 0, 1, 20deg);
		transform: rotate3d(0, 0, 1, 20deg);
	}
}

The tree vectors used in the demo are from Freepic and you can find them here: Tree vector designed by Freepik

We hope you have fun with these effects and find them inspirational!