CODEWITHSUNDEEP
javascriptanime.js
TechnicProblem
TechnicProblem

Reputation: 13

How to make multiple animejs animations play using onclick

I have a button which I want to have play two animations at the same time(if possible, 1 second between them) when I click on it. The animations are made using animeJS.

Button code <button type="button" id="button2">Press to start</button>

Animate Script 

    var animate1 = anime({
  targets: '#button2',
  //top: '70%',
  translateY: 500,
  autoplay: false,
  easing: 'spring(1, 80, 10, 0)'
});

var animate2 = anime({
targets: '#content',
//top: '70%',
translateY: 500,
autoplay: false,
easing: 'spring(1, 80, 10, 0)'
});

function animateAll() {
  animate1.restart;
  animate2.restart;
}

document.querySelector('#button2').onclick = animateAll();

Upvotes: 1

Views: 2683

Answers (1)

Aman Rathore
Aman Rathore

Reputation: 88

function animateAll() {
  animate1.restart();
  animate2.restart();
}

use animate.restart() instead of animate.restart when animateAll is executed.

Only use parenthesis to execute the function ,use only name of function when you want to assign it to a click handler.

You need to remove parentheis from animateAll when use are assigning it to the onclick handler.

   document.querySelector('#button2').onclick = animateAll;

New code should be :-

   function animateAll() {
  animate1.restart();
  animate2.restart();
}

document.querySelector('#button2').onclick = animateAll;

you can also use animate1.play(),animate2.play() instead of animate1.restart(),animate1.play()

Upvotes: 2

Related Questions