My 1st Tutorial on AnimeJs
Tags: webdev, tutorial, beginners, animejs
Published: 2021-02-17 04:06:48

***Hello, guys in this tutorial we will create an animated flip card using AnimeJs***

###Common query###
1. How to use AnimeJs
2. How to create an animation using AnimeJs
3. How to create flip animation
4. 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.**

###Step:1###
**Add below code inside index.html**
```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 http-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.***
```css
* {
  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;
}
```

###AnimeJs Video Output:###
{% youtube 84r9iz-2ans %}

###AnimeJs Codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/KKNmGJa default-tab=js,result %}