juliangarnier / anime

JavaScript animation engine

Home Page:https://animejs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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;