I have this effect of anime js

$(function(){

    var bouncingBall = anime({
      targets: '.box',
      translateY: '50vh',
      duration: 300,
      loop: 4,
      direction: 'alternate',
      easing: 'easeInCubic'
    });

});

How can I run the animation only when I'm clicking on a button,
so let's say I have in my HTML:

<div class="box">Button</div>

I have this effect of anime js

$(function(){

    var bouncingBall = anime({
      targets: '.box',
      translateY: '50vh',
      duration: 300,
      loop: 4,
      direction: 'alternate',
      easing: 'easeInCubic'
    });

});

How can I run the animation only when I'm clicking on a button,
so let's say I have in my HTML:

<div class="box">Button</div>

• javascript
• jquery
• animation

2 Answers 2

OK, I got it, In the javascript I should have had this line

document.querySelector('.box').onclick = bouncingBall.play;

so when I click on the class box it will animate the bouncingBall

Your js code should look like this:

$(function(){
    var bouncingBall = anime({
      targets: '.box',
      translateY: '50vh',
      duration: 300,
      loop: 4,
      direction: 'alternate',
      easing: 'easeInCubic',
      autoplay: false //if you don't want play animation on page load
    });

    document.querySelector('.box').onclick = bouncingBall //onclick event
});

Documentation: http://animejs./documentation/#playPause