Skip to content
Related Articles

Related Articles

Improve Article

How to create Timeline Animations using Anime.js ?

  • Last Updated : 27 Jul, 2021

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

Prerequisites:

  1. Basic knowledge of HTML
  2. Basic knowledge of CSS
  3. Basic knowledge of Javascript

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.

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

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 

Example 1:

index.html

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>A nice example for timeline</title>
      <script src=
      </script>
      <style>
         html{
         min-height: 200vh;
         }
         .ball {
         width: 60px;
         height: 60px;
         margin-top: 120px;
         margin-left:200px;
         border-radius: 50%;
         background-color: pink;
         float: left;
         }
      </style>
   </head>
   <body>
      <body>
         <div class="ball first"></div>
         <div class="ball second"></div>
         <div class="ball third"></div>
         <script>
            let animation = anime.timeline({
            duration: 500, 
            easing: 'easeInOutSine',
            direction: 'alternate',  
            autoplay:false,
            loop: true
            });           
              
            animation.add({
            targets: '.first',
            translateY: -50,
            backgroundColor: 'rgb(255, 0, 0)'
            }).add({
            targets: '.second',
            translateY: -50,
            backgroundColor: 'rgb(0, 255, 0)'
            }).add({
            targets: '.third',
            translateY: -50,
            backgroundColor: 'rgb(0, 0, 255)'
            });
            window.onscroll=()=>{
            animation.play();
            }
         </script>
   </body>
</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.

index.html

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>A nice example for timeline</title>
      <script src=
      </script>
      <style>
         html{
         min-height:200vh;
         }
         .ball {
         width: 200px;
         height: 200px;
         margin-top: 120px;
         margin-left:200px;
         background-color: pink;
         float: left;
         }
      </style>
   </head>
   <body>
      <body>
         <div class="ball first"></div>
         <div class="ball second"></div>
         <div class="ball third"></div>
         <script>
            let animation = anime.timeline({
            duration: 400, 
            easing: 'easeInOutSine',
            direction: 'alternate',
            autoplay:false,  
            loop: true
            });           
              
            animation.add({
            targets: '.first',
            translateX: [-100,100],
            backgroundColor: 'rgb(255, 0, 0)',
              
            }).add({
            targets: '.second',
            translateX: [-100,100],
            backgroundColor: 'rgb(0, 255, 0)',
              
            }).add({
            targets: '.third',
            translateX: [-100,100],
            backgroundColor: 'rgb(0, 0, 255)',
            });
            window.onscroll=()=>{
            animation.play()
            }
         </script>
   </body>
</html>

Output: Click on the index.html file to open it in the browser.




My Personal Notes arrow_drop_up
Recommended Articles
Page :