As a web designer, there are many libraries that you can use to create animation. They range from CSS, SVG graphics, GSAP, API, JavaScript and many more. So, with all animation Libraries available, why should we use Anime? Even though GSAP can do a lot more than Anime, it is also a way heavier. So, to keep the API as simple as possible, you can focus on the things you really need. Then, keep maintaining the code super lightweight. In short, in terms of dynamic animations of HTML and SVG elements, Anime.js is an excellent choice for you.
How to Use Anime.js
In the following samples, we provide you with a basic use of Anime.js. Most animations will run a bit slowly for demonstration purposes. But, installing Anime.js is not different from installing jQuery or any other familiar JavaScript library.
First, you have to download the .zip file from the library’s project’s page on GitHub. Then, extract the files and add anime.min.js using <script> tags in your <script>document:
<script src=”anime.min.js”></script>
Alternatively, you can use npm or bower:
npm install animejs
bower install animejs
Adding One Animation to a Single Element: Bouncing Ball
You can get started with the simplest kind of animation, once you’ve got Anime set up in your project.
The first step is to call anime passing an object with a bunch of details about the animation. Here’s the basic structure:
var bouncingBall = anime({
//code here
});
The next step is to flesh out the object above with some instructions on what to animate, the kind of animation, its duration, etc.
var bouncingBall = anime({
targets: ‘.ball’,
translateY: ’50vh’,
duration: 300,
loop: true,
direction: ‘alternate’,
easing: ‘easeInCubic’
});
Anime knows which element you want to animate through the targets property. Here, you can use a CSS selector like I did in the example above, or any of the following:
- DOM element, e.g., querySelector(‘.ball’)
- Nodelist, e.g., querySelectorAll(‘.ball’)
- JavaScript object, e.g., {elementName: ‘ball’}
- JavaScript array, e.g., [‘.ball’]
You can use an array as your data structure if your target property has more than one value or you intend to apply your animation to more than one element:
var bouncingBall = anime({
targets: [‘.ball’, ‘.kick’],
//rest of the code
});
The second property in the example shows how to move the ball element vertically with translateY. This structure might look familiar to those using CSS. As opposed to targeting elements’ position properties or their width and height, tiffany Brown and others recommend using translate and scale to move elements and change their dimensions respectively.
Next in the list of properties in the above animation snippet is the duration property. This will inform the animation to last. Delay is another useful property, if you have more than one animation taking place at different times.
You can discover how many times you want the animation to take place through the loop property. Its default value is false, which makes the animation run just once. To run your animation indefinitely, you can change this value to true, or have it run a precise number of times by setting this property to the desired number.
To set the direction property to any of the values of its CSS counter-part: normal, reverse and alternate, the direction property is also present in CSS animations and Anime. This last value alternates between the normal direction of the animation and its reserve, which seems to work great for a bouncing ball.
In conclusion, the above code describes an easing property for your animation. In fact, the right easing value is a crucial ingredient of a polished and effective animation.
With this simple snippet, you can find out all the easing functions you can use with Anime:
console.log(anime.easings);
Animating Inline SVG Attributes with Anime.js
In the second demo, you can animate attributes of an inline SVG graphic, so that it’s easy to target them in the code.
This is how you can animate the cat’s eyes:
var movingEyes = anime({
targets: [‘.inner-left-eye’, ‘.inner-right-eye’],
cy: 400,
duration: 500,
delay: function(el, index) {
var singleDelay = index === 0 ? 300 : index * 500;
return singleDelay;
},
autoplay: false
});
By modifying the value of the cy attribute of the circle shapes that make up the cat’s pupils. The code above will lower the cat’s eyes.
As a result, the eyes move in succession. The delay property can be a number but also a function. Besides, you will have a programmatic control over the starting time of your animation. The function tells Anime whether the element you want to animate is the first one (at the 0 position in the targets array), i.e., the left eye, then the animation has a 300ms’ delay. Otherwise, the element has a delay that results from the index number (i.e., 1) multiplied by 500ms.
Aside from these two illustrations, you can also add a second animation to the bouncing ball. Then, animate two elements in succession, play, pause and restart an animation.