<select>
<option value="animejs">AnimeJS</option>
<option value="gsap">GSAP</option>
</select>
<button>Run animation</button>
<p>Status: <span class="status">Inactive</span></p>
<div class="container">
<div class="card">
<img src="https://imgur.com/7Q2fZcQ.png" class="back" />
<img src="https://imgur.com/G4BYZF1.png" class="front" />
</div>
</div>
body {
margin: 16px;
background-color: #27a13d;
}
select {
float: left;
padding: 0 0 0 8px;
font-size: 12px;
font-weight: bold;
font-family: 'Verdana';
height: 24px;
background-color: white;
color: #27a13d;
border: none;
border-radius: 6px;
background-color: white;
}
button {
float: left;
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
border-radius: 6px;
font-size: 12px;
font-weight: bold;
font-family: 'Verdana';
height: 24px;
background-color: white;
color: #27a13d;
padding: 0 12px;
margin-left: 8px;
}
p {
margin: 0;
display: inline-block;
color: white;
font-size: 14px;
font-family: 'Verdana';
margin-left: 8px;
line-height: 24px;
}
.container {
position: relative;
margin-top: 16px;
}
.card {
position: absolute;
width: 106px;
height: 148px;
perspective: 400px;
transform-style: preserve-3d;
}
.card img {
position: absolute;
width: 100%;
height: 100%;
}
.card .front {
transform: rotateY(-90deg);
}
.card .back {
transform: rotateY(0deg);
}
$( "button" ).click(function() {
var option = $('select option:selected').val()
if (option == "animejs") {
animateUsingAnimeJS()
} else if (option == "gsap") {
animateUsingGSAP()
}
});
function animateUsingAnimeJS() {
$(".card img").css("transform", ""); // Reset animation
var timeline = anime.timeline({
begin: function() {
$(".status").text("Animating")
},
complete: function() {
$(".status").text("Inactive")
}
});
timeline.add({
targets: '.card',
left: [0, 300],
easing: 'easeInOutSine',
duration: 500
}).add({
targets: '.card .back',
rotateY: [0, 90],
easing: 'easeInSine',
duration: 200
}).add({
targets: '.card .front',
rotateY: [-90, 0],
easing: 'easeOutSine',
duration: 200
})
}
function animateUsingGSAP() {
$(".card img").css("transform", ""); // Reset animation
var timeline = gsap.timeline({
onStart: function() {
$(".status").text("Animating")
},
onComplete: function() {
$(".status").text("Inactive")
}
});
timeline.fromTo(".card", {
left: 0
}, {
duration: 0.5,
left: 300
}).fromTo(".card .back", {
rotationY: 0
}, {
rotationY: 90,
ease: "power1.easeIn",
duration: 0.2
}).fromTo(".card .front", {
rotationY: -90
}, {
rotationY: 0,
ease: "power1.easeOut",
duration: 0.2
})
}
This Pen doesn't use any external CSS resources.