Vibrate phone when animation has finished? Only works if button is clicked

Question

When the image has finished its animation (sliding in from the left) I want it to vibrate for 2 seconds using the HTML 5 vibrate API:

navigator.vibrate(2000);

Using an on click event works for the button:

<button class="vibrate-button">Vibrate</button>



$('.vibrate-button').click(function(){
        navigator.vibrate(2000);
    });

But not when I try and call it when the animation has finished:

    $('.iphone-image').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(event) {
        console.log('Animation has finished');
        navigator.vibrate(2000);
  });

DEMO: https://codepen.io/ifusion/pen/rzRzEO

How can I get it to vibrate when the animation has finished?

Answer 1

this article says because of abused by malicious sites they have disabled this feature I tried same it returns false on console only on click it returns true.

https://www.chromestatus.com/feature/5644273861001216