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..?
Advertisement
Answer
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>