Let’s create some animations using Anime.js.
npm install animejs
bower install animejs
Then in your script file:
import anime from 'animejs'
Let’s add the following code snippet into our HTML
< body >:
< div class="purple" >< /div >
< div class="darkgreen" >< /div >
< div class="darkred" >< /div >
The first step is to initialize anime object:
Within the object above, we will provide certain properties to instruct what and how the elements should animate.
targets: ['.purple', '.darkgreen', '.darkred'],
Here, the targets property defines the elements to animate. The property translateX moves the elements in horizontal direction. The property duration defines how long the animation lasts.
The loop property runs the animation indefinitely if it is set to true. If it is set to false, it runs just once.
Check out the complete demo here.
Working with Anime.js is easy and fun. It lets you create smooth animations and the API is easy to follow. It offers a lot of other cool features. If you wish to explore further, check out the documentation and examples here. I hope you will enjoy working with Anime.js.