DEV Community

loading...
Cover image for My 1st Tutorial on AnimeJs

My 1st Tutorial on AnimeJs

stackfindover profile image Stackfindover ・2 min read

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

AnimeJs Video Output:

AnimeJs Codepen Output:

Discussion (0)

pic
Editor guide