Make Coin Flip Animation Two Sided

Question

I would like this animation taken from animate.css to show a coin with 2 different side and not the same one. I pasted the relevant parts of my code to this Fiddle: jsFiddle Link

HTML Code:

<div id="coin-flip">
        <button id="btnFlip">Flip the Coin</button></br></br></br>
        <div id="coin-flip-cont">
            <div id="coin"></div>
        </div></br></br></br>
        <h2 id="result"></h2>
 </div>

Javascript, jQuery Code:

$(function() {
        var coin = {
            sideOne: "./img/image1.png",
            sideTwo: "./img/image2.png"
        }

        $("#btnFlip").click(function() {
            $("#coin").html(`<img class="animated flip"src="${coin[result]}" width="200" length="200"/>`);
        });
});

CSS is from Animate.css, You can view it in the Fiddle.

Basically the result I want is the coin to flip showing both different sides and landing on the one that is set by the rest of my code.

EDIT: Just adding this as an example of what I would like to achieve http://codepen.io/html5andblog/pen/ea62c27ddb5c7b022ab1e889e2f1b8d2 I feel that this can be done in a much simpler way and with the css that I already have.

Answer 1

Here is the complete code you can flip coin 2 sided solution run snippet. To watch correct result see in full page view otherwise you can see on codepen. You can have link of codepen too click here

jQuery(document).ready(function($){

	var spinArray = ['animation900','animation1080','animation1260','animation1440','animation1620','animation1800','animation1980','animation2160'];

	function getSpin() {
	var spin = spinArray[Math.floor(Math.random()*spinArray.length)];
	return spin;
	}

	$('#flip').on('click', function(){

	$('#coin').removeClass();

	setTimeout(function(){
	$('#coin').addClass(getSpin());
	}, 100);

	});

	});

html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	}

	#coin-flip-cont {
	width: 200px;
	height: 200px;
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 100px);
	}

	#coin {
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
	}

	#coin .front, #coin .back {
	position: absolute;
	width: 200px;
	height: 200px;
	}

	#coin .front {
	transform: translateZ(1px);
	border-radius: 50%;
	background-color: #3498db;
  border: solid 5px gray;
	}

	#coin .back {
	transform: translateZ(-1px) rotateY(180deg);
	border-radius: 50%;
	background-color: #2ecc71;
  border: solid 5px gray;
	}

	#coin.animation900 {
	-webkit-animation: rotate900 3s linear forwards; 
	animation: rotate900 3s linear forwards;
	}

	#coin.animation1080 {
	-webkit-animation: rotate1080 3s linear forwards; 
	animation: rotate1080 3s linear forwards;
	}

	#coin.animation1260 {
	-webkit-animation: rotate1260 3s linear forwards; 
	animation: rotate1260 3s linear forwards;
	}

	#coin.animation1440 {
	-webkit-animation: rotate1440 3s linear forwards; 
	animation: rotate1440 3s linear forwards;
	}

	#coin.animation1620 {
	-webkit-animation: rotate1620 3s linear forwards; 
	animation: rotate1620 3s linear forwards;
	}

	#coin.animation1800 {
	-webkit-animation: rotate1800 3s linear forwards; 
	animation: rotate1800 3s linear forwards;
	}

	#coin.animation1980 {
	-webkit-animation: rotate1980 3s linear forwards; 
	animation: rotate1980 3s linear forwards;
	}

	#coin.animation2160 {
	-webkit-animation: rotate2160 3s linear forwards; 
	animation: rotate2160 3s linear forwards;
	}

	@-webkit-keyframes rotate900 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
	}

	@keyframes rotate900 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(900deg); -moz-transform: rotateY(900deg); transform: rotateY(900deg); }
	}

	@-webkit-keyframes rotate1080 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
	}

	@keyframes rotate1080 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1080deg); -moz-transform: rotateY(1080deg); transform: rotateY(1080deg); }
	}

	@-webkit-keyframes rotate1260 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
	}

	@keyframes rotate1260 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1260deg); -moz-transform: rotateY(1260deg); transform: rotateY(1260deg); }
	}

	@-webkit-keyframes rotate1440 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
	}

	@keyframes rotate1440 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1440deg); -moz-transform: rotateY(1440deg); transform: rotateY(1440deg); }
	}

	@-webkit-keyframes rotate1620 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
	}

	@keyframes rotate1620 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1620deg); -moz-transform: rotateY(1620deg); transform: rotateY(1620deg); }
	}

	@-webkit-keyframes rotate1800 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
	}

	@keyframes rotate1800 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
	}

	@-webkit-keyframes rotate1980 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
	}

	@keyframes rotate1980 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
	}

	@-webkit-keyframes rotate2160 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
	}

	@keyframes rotate2160 {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(2160deg); -moz-transform: rotateY(2160deg); transform: rotateY(2160deg); }
	}
.button {
  background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 125px;
		position: inherit;
}
.front-text{
    font-weight: 700 !important;
    margin-top: 45%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
			<div>
			  <div id="coin-flip-cont">
			    <div id="coin">
            <div class="front"><p class="front-text">Head</p></div>
            <div class="back"><p class="front-text">Tail</p></div>
			    </div>
			  </div>
			  <button type="button" id="flip" class="button"> Flip Coin</button>
			</div>
</center>

Answer 2

First of all, change this line of your HTML code :

<button id="btnFlip">Flip the Coin</button>

To :

<button id="btnFlip" onclick="coin_flip()">Flip the Coin</button>

And then change your javascript to this code :

function coin_flip{
var coin_1 = "/images/image_1.png"
var coin_2 = "/images/image_2.png"
// the 8 below is the number of flips in your animation
for (var i = 0 ; i<8 ; i++){
    if (document.getElementById("coin").src == coin_1){
        document.getElementById("coin").src == coin_2
    }
    if (document.getElementById("coin").src == coin_2){
        document.getElementById("coin").src == coin_1
    }
}
// below chooses a random side
var rand = Math.floor((Math.random() * 2) + 1);
document.getElementById("coin").src == "coin_" + rand
}

This javascript code flips the coin 8 times before choosing a random side to land on.

Answer 3

you can use animationend event to detect when the CSS animation ended.

Then you execute code to change the image source.

JQuery

$('#coin').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
function(e) {

    $("#coin").removeClass('animateCoin');
    setTimeout(function() {
            var srcImg = $($('#coin img')[0]).attr('src');
            if (srcImg === coin.heads)
                $($('#coin img')[0]).attr('src',coin.tails);
            else
                $($('#coin img')[0]).attr('src',coin.heads);
            $("#coin").addClass('animateCoin');
    },50);          
});

CSS :

.animateCoin {
    animation: flip 1s;
}