<!-- <h1>Click Cards to Flip</h1> -->
<div class="wrapper">
	<div class="card">
		<div class="faces">
			<div class="face front"><img src="https://assets.codepen.io/32887/herman.svg" width="100"/></div>
			<div class="face back"></div>
		</div>
	</div>
</div>
.card {
	margin:20px;
	perspective:600px;
}

.faces {
	width:160px;
	height:220px;
	transform-style:preserve-3d;
}

.face {
	border:8px solid white;
	width:100%;
	height:100%;
	border-radius:20px;
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	backface-visibility:hidden;
}

.front {
	background:#ffcc32;
	/*added for mobile browsers*/
	transform:translateZ(1px);
}

.back {
	transform:rotateY(180deg);
	color: white;
  	background: repeating-linear-gradient(70deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}



.loser .front{
	background:black;
}

.loser img {
	filter:saturate(0);
}


/* page layout */

body, html {
	width:100%;
	
	font-family:Arial, sans-serif;
	
	margin:0;
	font-size:20px;
	background:#1d1d1d;
}
* {
	position:relative;
	box-sizing:border-box;
}
.wrapper {
	visibility:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}

.front * {
	backface-visibility:hidden;
	
}

h1 {
	color:white;
	text-align:center;
}
let wrapper = document.querySelector(".wrapper")
let parentCard = document.querySelector(".card")
let cardCount = 6 // make bigger

function createCards() {
	for(var i = 0; i < cardCount -1; i++){
		let clone = parentCard.cloneNode(true)
		wrapper.appendChild(clone)		
	}
}
createCards()

let cards = gsap.utils.toArray(".card > .faces")
let loserIndex = gsap.utils.random(0, cardCount -1, 1)
console.log(loserIndex)
cards[loserIndex].classList.add("loser")

cards.forEach(function(card, index){
	let animation = gsap.timeline({paused:true})
	animation.fromTo(card, {rotationY:180}, {rotationY:0})
	if(index == loserIndex){
		animation.to(".faces:not(.loser)", {opacity:0, ease:"power1.in", scale:0.9, duration:0.3, stagger:0.1})
		animation.to(".loser .face", {duration:0.3, borderColor:"red", repeat:4, yoyo:true})
		
	}
	card.animation = animation
	card.addEventListener("click", function(){
		card.animation.play()
	})
})

gsap.set(wrapper, {autoAlpha:1})
gsap.from(".card", {opacity:0, stagger:0.2})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://assets.codepen.io/16327/GSDevTools3.min.js