Hello, guys in this tutorial we will create an animated flip card using AnimeJs
Common query
- How to use AnimeJs
- How to create an animation using AnimeJs
- How to create flip animation
- flip animation CSS
Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to to use AnimeJs.
First, we need to create three files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Card Flip AnimeJs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
</head>
<body>
<div class="card-outer">
<div class="card-container">
<div class="card">
<div class="front">
<h2>Hii I'm Rahul</h2>
</div>
<div class="back">
<strong>Rahul Jangir, a tech geek, designing enthusiast and an online expert could be a graduate in technology who is addicted to front-end development.</strong>
</div>
</div>
</div>
</div>
<script>
var card = document.querySelector(".card");
var playing = false;
card.addEventListener("click", function(){
if(playing) return;
playing = true;
anime({
targets: card,
scale: [{value:1}, {value:1.3},{value:1, delay: 250} ],
rotateY: {value: "+=180", delay: 200},
easing: "easeInOutSine",
duration: 400,
complete: function(anim) {
playing = false;
}
})
})
</script>
</body>
</html>Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
outline: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
overflow: hidden;
height: 100vh;
}
.card-outer {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.card-container {
width: 400px;
height: 250px;
border-radius: 10px;
perspective: 1400px;
}
.card {
position: relative;
height: 100%;
border-radius: 10px;
width: 100%;
transform-style: preserve-3d;
}
.front, .back {
display: flex;
width: 100%;
height: 100%;
border-radius: 10px;
text-align: center;
justify-content: center;
backface-visibility: hidden;
}
.front {
color: #fff;
background: #000;
position: relative;
overflow: hidden;
}
.back {
position: absolute;
top: 0;
left: 0;
transform: rotateY(180deg);
color: #fff;
background: #4b00ff;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.front > h2 {
display: flex;
align-items: center;
font-size: 35px;
}
strong {
padding: 0 10%;
font-size: 20px;
font-weight: 500;
display: flex;
align-items: center;
text-align: left;
}