Transpose Clippath CSS Keyframe animations into anime.js animation
Last Updated :
22 Nov, 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=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
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=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
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;
}
</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.
Similar Reads
CSS Animation and @Keyframes Property
CSS allows the animation of HTML elements without using JavaScript. An animation lets an element systematically and with proper timing, change from one style to another. You can change whatever CSS properties you want, end the number of times, as you want it. To use CSS animation, you must first spe
4 min read
How to create Timeline Animations using Anime.js ?
Anime.js is a lightweight JavaScript library with a simple and small powerful API. It works with the DOM element, CSS, and JavaScript object.PrerequisitesBasic knowledge of HTMLBasic knowledge of CSSBasic knowledge of JavaScriptInstallation of anime.js: There are two ways to use anime.js in your pro
2 min read
How to use Animation and Transition Effects in CSS ?
With the help of CSS, you may design impressive visual effects for your website. Animation and transition effects are two common ways to add animation and visual effects to a web page. By attracting users' attention and directing them through your material, these effects may make your website more d
4 min read
How to create X and Y axis flip animation using HTML and CSS ?
The flip animation is the kind of loading animation in which we use a square flip effect to give the feel of loading animation. These kinds of animations are useful in times when the content of the website is taking too long to load. This animation can keep visitors engage and prevent them from leav
3 min read
Tailwind CSS Transitions and Animation Complete Reference
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Transitions utilities control the transition and animation of elements. it provides transition classes like transition Property, duration, timing function, delay to m
2 min read
Why are CSS animations and transitions blocked by JavaScript ?
When JavaScript is used to alter the CSS properties on which the animations and transitions are based, CSS animations and transitions may be prevented by JavaScript. The animation or transition may stop suddenly or fail to show altogether if the properties are altered before it has finished. This ha
6 min read
CSS animation-iteration-count Property
The animation-iteration-count property in CSS specifies the number of times an animation should be repeated. It can also be set to infinite to repeat the animation indefinitely.Syntaxanimation-iteration-count: number | infinite | initial | inherit;Property Valuenumber: Specifies the number of times
3 min read
How to create Frame by Frame Animation using CSS and JavaScript ?
Frame by frame animation is a technique where a set of images are shown, one by one in a particular order, maintaining fixed time interval gaps between two consecutive images, to make an illusion of motion to the eyes. Now, in a more technical way, we can say that frame-by-frame animation is a techn
2 min read
Difference between animation and transition in CSS
CSS transitions allow you to change property values smoothly, but they always need to be triggered like hover. Property changes do not take effect immediately. Over a period of time, the property changes take place. For example, if you change the color of an element from white to black, the change o
3 min read
How to Use Frames and Keyframes in Flash?
Flash is one of the best animating tools which has been used in various projects including movies and games. It has a lot of features that make the animation process faster and easier. There are a number of versions of flash available in the market but the current version is known as Adobe Animate w
5 min read