I just started with anime.js and wrote this basic code, but it doesn’t work.
JavaScript
x
50
50
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>7
<meta name="viewport" content="width=device-width, initial-scale=1.0">8
<title>Document</title>9
</head>10
11
<body>12
<script>13
var blue = anime({14
targets: '.blue',15
translateY: 200,16
autoplay: false17
});18
19
document.querySelector('.play-blue').onclick = blue.restart;20
21
</script>22
<style>23
.square {24
pointer-events: none;25
position: relative;26
width: 50px;27
height: 50px;28
background-color: cornflowerblue;29
margin: 4px;30
display: inline-block;31
}32
33
.blue {34
background: blue;35
}36
37
.controls {38
margin-top: 250px;39
}40
</style>41
<div id="anime-demo">42
<div class="square blue"></div>43
44
</div>45
<div class="controls">46
<button class="play-blue">Animate Blue</button>47
</body>48
49
</html>50
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
JavaScript
1
8
1
window.addEventListener("load", function() {2
var blue = anime({3
targets: '.blue',4
translateY: 200,5
autoplay: false6
});7
document.querySelector('.play-blue').addEventListener("click", blue.restart);8
});JavaScript
1
17
17
1
.square {2
pointer-events: none;3
position: relative;4
width: 50px;5
height: 50px;6
background-color: cornflowerblue;7
margin: 4px;8
display: inline-block;9
}10
11
.blue {12
background: blue;13
}14
15
.controls {16
margin-top: 250px;17
}JavaScript
1
9
1
<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>2
3
<div id="anime-demo">4
<div class="square blue"></div>5
6
</div>7
<div class="controls">8
<button class="play-blue">Animate Blue</button>9
</div>When you need more controls, you could delegate:
JavaScript
1
9
1
window.addEventListener("load", function() {2
document.querySelector('.controls').addEventListener("click", function(e) {3
const tgt = e.target;4
if (tgt.tagName ==="BUTTON") {5
.6
}7
});8
});9
Here is a more generic version you can study
JavaScript
1
23
23
1
const parms = {2
"blue": {3
targets: '.blue',4
translateY: 200,5
autoplay: false6
},7
"red": {8
targets: '.red',9
translateY: 400,10
autoplay: false11
}12
}13
const running = {}14
window.addEventListener("load", function() {15
Object.keys(parms).forEach(key => {16
running[key] = anime(parms[key]); // save the object17
const but = document.querySelector('.play-' + key);18
but.dataset.running = key;19
but.addEventListener("click", function() {20
running[this.dataset.running].restart()21
});22
})23
});JavaScript
1
21
21
1
.square {2
pointer-events: none;3
position: relative;4
width: 50px;5
height: 50px;6
background-color: cornflowerblue;7
margin: 4px;8
display: inline-block;9
}10
11
.blue {12
background: blue;13
}14
15
.red {16
background: red;17
}18
19
.controls {20
margin-top: 250px;21
}JavaScript
1
11
11
1
<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>2
3
<div id="anime-demo">4
<div class="square blue"></div>5
<div class="square red"></div>6
7
</div>8
<div class="controls">9
<button class="play-blue">Animate Blue</button>10
<button class="play-red">Animate Red</button>11
</div>