How to create Timeline Animations using Anime.js ?
Installation of anime.js: There are two ways to use anime.js in your project:
- You can download the anime.min.js file and directly use it.
- Just google anime.js CDN and you will get the link and just put it in your script tag as shown below.
Basic Properties used in anime.js:
- targets: The Css Selectors to target and identify on which animation has to apply.
- duration: Time in milliseconds for which animation should last.
- delay: Time in milliseconds after which animation starts.
- translateX: Places element at that x coordinate.
- translateY: Places element at Y coordinate.
- offset: This gives delay between different animations. i.e. to start another animation after x seconds of the previous one.
Creating an application and Project structure: This is a simple webPage. All we need to do is create a project and inside it create an HTML File named index.html.
mkdir animation && cd animation touch index.html
Output: Click on index.html to open it in browser:
Example 2: In this example, the translateX property becomes more clear. It first translates into -ve x axis and then +ve x axis.
Output: Click on the index.html file to open it in the browser.