Why a cant use play/pause buttons?
TreeFall1 opened this issue · comments
JS:
let elements = document.querySelectorAll(".el");
let playBtn= document.querySelector('.play');
let pauseBtn= document.querySelector('.pause');
const circle = anime({
targets: elements,
left: "240px",
borderRadius: ["0%", "50%"],
duration: 1000,
easing: 'easeInOutQuad',
autoplay: false,
// loop: true,
});
playBtn.onclick = animation.play;
pauseBtn.onclick = animation.pause;
HTML:
<div class="el"></div>
<div class="btns-container">
<button class="play">Play</button>
<button class="pause">Pause</button>
</div>
<script src="animejs/lib/anime.min.js"></script>
<script src="script.js"></script>
Why my play/pause buttons doesnt work? Its says: Uncaught ReferenceError: animation is not defined
It's because the animation
variable is never declared, your animation variable is circle
.
Do this instead:
playBtn.onclick = circle.play;
pauseBtn.onclick = circle.pause;