javascript css-animations anime.js web-animations

anime.js animation not working, (the animation doesn't get initiated)

I just started with anime.js and wrote this basic code, but it doesn't work.

  <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            var blue = anime({
                targets: '.blue',
                translateY: 200,
                autoplay: false
            });
    
            document.querySelector('.play-blue').onclick = blue.restart;
    
        </script>
        <style>
            .square {
                pointer-events: none;
                position: relative;
                width: 50px;
                height: 50px;
                background-color: cornflowerblue;
                margin: 4px;
                display: inline-block;
            }
    
            .blue {
                background: blue;
            }
    
            .controls {
                margin-top: 250px;
            }
        </style>
        <div id="anime-demo">
            <div class="square blue"></div>
    
        </div>
        <div class="controls">
            <button class="play-blue">Animate Blue</button>
    </body>
    
    </html>

I had installed anime through npm, and when it didn't work also included the cdn (line no-6) Can anyone tell where I'm going wrong..?

Solution

Your element does not exist when you execute the document.querySelector statement

Wrap your code in a load event listener

And I also suggest you use addEventListener on the button

window.addEventListener("load", function() {
  var blue = anime({
    targets: '.blue',
    translateY: 200,
    autoplay: false
  });
  document.querySelector('.play-blue').addEventListener("click", blue.restart);
});

.square {
  pointer-events: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}

.blue {
  background: blue;
}

.controls {
  margin-top: 250px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

<div id="anime-demo">
  <div class="square blue"></div>

</div>
<div class="controls">
  <button class="play-blue">Animate Blue</button>
</div>

When you need more controls, you could delegate:

window.addEventListener("load", function() {
  document.querySelector('.controls').addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName ==="BUTTON") {
      ....
    }
  });
});

Here is a more generic version you can study

const parms = {
  "blue": {
    targets: '.blue',
    translateY: 200,
    autoplay: false
  },
  "red": {
    targets: '.red',
    translateY: 400,
    autoplay: false
  }
}
const running = {}
window.addEventListener("load", function() {
  Object.keys(parms).forEach(key => {
    running[key] = anime(parms[key]); // save the object
    const but = document.querySelector('.play-' + key);
    but.dataset.running = key;
    but.addEventListener("click", function() {
      running[this.dataset.running].restart()
    });
  })
});

.square {
  pointer-events: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.controls {
  margin-top: 250px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

<div id="anime-demo">
  <div class="square blue"></div>
  <div class="square red"></div>

</div>
<div class="controls">
  <button class="play-blue">Animate Blue</button>
  <button class="play-red">Animate Red</button>
</div>