Skip to content

Latest commit

 

History

History
30 lines (24 loc) · 863 Bytes

File metadata and controls

30 lines (24 loc) · 863 Bytes

Controlar animaciones 💿📀

  • Podemos controlar el estado de la animación. Esto podemos hacerlo por medio de botones que disparen la función que queremos. Los métodos que tenemos disponibles podemos verlos en la variable 'animate' en la consola.

    EJ:

const animation = $element.animate(
keyFrames, animateProperties)
	
const $playButton = document.getElementById('play');
const $pauseButton = document.getElementById('pause');
const $stopButton = document.getElementById('stop');
const $reverseButton = document.getElementById('reverse');

$playButton.addEventListener ('click', () => {
	animation.play();
});
$pauseButton.addEventListener ('click', () => {
	animation.pause();
});
$stopButton.addEventListener ('click', () => {
	animation.stop();
});
$reverseButton.addEventListener ('click', () => {
	animation.reverse();
});