Skip to content
Related Articles

Related Articles

Transpose Clippath CSS Keyframe animations into anime.js animation
  • Last Updated : 10 Mar, 2021

Anime.js is a small, lightweight JavaScript library with a simple and small powerful API. It works with the DOM element, CSS, and JavaScript object.

we use a library for making our work simple and easy. A library is a JavaScript document that contains a lot of functions, and those functions achieve some helpful tasks for your web-page.

CDN link:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>

Example: In simple CSS, if we want to animate any object we have to add animation property to that HTML tag or class, or id. We can achieve animation using simple CSS.



HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- Below is the cdn for anime.js -->
    <script
      src=
      integrity=
"sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q=="
      crossorigin="anonymous">
    </script>
    <style>
        /* Adding basic CSS */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
  
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: rgb(29, 29, 29);
        flex-wrap: wrap;
      }
  
      .container {
        flex-direction: row;
        display: flex;
        align-content: center;
        justify-content: center;
      }
      .circle {
        width: 60px;
        height: 60px;
        background: crimson;
        border-radius: 50%;
        margin: 1rem;
        clip-path: circle(100%);
        animation: animation 1.5s forwards infinite;
      }
  
      @keyframes animation {
        100% {
          clip-path: circle(0);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="circle"></div>
    </div>
  </body>
</html>
  
</html>

Output:

To transpose the Clippath CSS Keyframe animations into anime.js animation we will be following the below approach.

Approach: First, we will remove keyframes and animation from the CSS file. Now we will write our JavaScript.

In anime.js, we have to specify that what will be the starting frame and the ending frame because if we add only one frame it will remain stationary and animation will not take place.

  • Our starting frame is 

    clip-path: circle(100%);
  • Our ending frame is 

    clip-path:circle(0);

So achieving the above animation using anime.js is very simple and will require just a few lines of code.

JavaScript: The following demonstrates the JavaScript part of the code.

Javascript




  anime({
  targets: ".circle",
  easing: "easeInOutExpo"
  keyframes: [
    { clipPath: "circle(100%)" }, 
    { clipPath: "circle(0)" },
  ],
  direction: "alternate"
  duration: 1500, 
  loop: true 
});
   

Complete Solution: We select our targets, so we select our circle div tag.  In the second line, we declare our motion. We will move it with easeInOutExpo, it will make our animation smooth. Then, we declare our keyframes, in which the first line will be the starting frame and the second line will contain the ending frame.

We will declare the direction in which it will animate like reverse, forward or alternate. Then we will give the time duration for the animation to take place. And the last line includes whether we want to make the animation infinite times by giving true value to loop or just once by giving value false.

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
            integrity=
"sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q=="
      crossorigin="anonymous">
    </script>
    <style>
      
        /* Adding basic CSS */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
  
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: rgb(29, 29, 29);
        flex-wrap: wrap;
      }
  
      .container {
        flex-direction: row;
        display: flex;
        align-content: center;
        justify-content: center;
      }
      .circle {
        width: 60px;
        height: 60px;
        background: crimson;
        border-radius: 50%;
        margin: 1rem;
        clip-path: circle(100%);
        animation: animation 1.5s forwards infinite;
      }
  
      @keyframes animation {
        100% {
          clip-path: circle(0);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="circle"></div>
    </div>
    <script>
      anime({
            
        // Selecting our target
        targets: ".circle", 
          
        // Adding easing attribute for smooth animation
        easing: "easeInOutExpo", 
        keyframes: [ //Frame start and End
          { clipPath: "circle(100%)" },
          { clipPath: "circle(0)" }, 
        ],
        direction: "alternate", 
        duration: 1500, 
        loop: true, 
      });
    </script>
  </body>
</html>

Output:In this way, we can transpose Clippath CSS Keyframe animations into anime.js animation.

My Personal Notes arrow_drop_up
Recommended Articles
Page :