After the image completes its animation by sliding in from the left, I would like it to vibrate for 2 seconds using the HTML 5 vibrate API:
navigator.vibrate(2000);
An on-click event successfully triggers the vibration when a button is clicked:
<button class="vibrate-button">Vibrate</button>
$('.vibrate-button').click(function(){
navigator.vibrate(2000);
});
However, attempting to call the vibration function upon completion of the animation does not work:
$('.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
Is there a way to make it vibrate once the animation is complete?