animationEnd event handler - event heard two times

Question

I have a code:

$('#sectionName').on('animationend webkitAnimationEnd oAnimationEnd', function () {
    alert("Hello");
});

which is meant to trigger the alert when animation of #sectionName ends.

It does its job but it is also triggered first time the website is launched.

Is there a way to prevent it? Some way to trigger this alert only when the animationend event is heard for the second time?

PS I am using wow.js, so the #sectionName object slides in, after scrolling to certain page point, and then I want the alert to be displayed.

Answer 1

Try it simple:

Var firstTime = true
$('#sectionName').on('animationend webkitAnimationEnd oAnimationEnd', function () {
    if(firstTime){
        firstTime = false;
        return;
    }
    alert("Hello");
});

Answer 2

You can use wow.js callback to catch an animation is started:

var sections = ['sectionName', 'sectionName2']
var wow = new WOW({
  callback: function(box) {
    var $box = $(box);
    if ( sections.indexOf( $box.attr('id') ) >= 0 ) {
      $box.on('animationend webkitAnimationEnd oAnimationEnd', function () {
          alert("Hello");
      });    
    }
  }
}).init();

[ https://jsfiddle.net/6g01kLsh/ ]

Answer 3

Only tested for animationend and webkitAnimationEnd .

var isWebkitAnim = window.onanimationend === undefined && window.onwebkitanimationend !== undefined
var animationEndEvent = isWebkitAnim ? 'webkitAnimationEnd' : 'animationend'

$('#sectionName').on(animationEndEvent, function() {
    alert("Hello")
})