Использование wow эффектов анимации

Помогите победить не большой баг. В общем строю список li получая данные JSON-м таким образом.

    var items = '';
$.getJSON("/info.json", function(response) {
  $.each(response, function(i, val) {
    items += '<li id="list_' + val.id + '" data-groupDrink="s' + val.cat + '" class="wow zoomInUp" data-wow-offset="0.5s" data-wow-delay="100" data-wow-duration="1s"></li>';
  });
  $('#line-list').html(items);
});

И отображение делю на 5 элементов по 3 категории. Таким вот образом. Есть меню с 3-мя ссылками href у них #1,#2,#3 Клики по ним обрабатываю так:

$('.menu a').on('click', function(e){ 
        e.preventDefault(); 
        var i = $(this).attr('href').substr(1);
        $('[data-groupDrink]').removeClass('active');
        $('[data-groupDrink="'+i+'"]').addClass('active');
}

Ну css свойства:

[data-groupDrink] {
  display: none!important;
}
[data-groupDrink].active {
  display: inline-block!important;
}

Вот пример:

$(document).ready(function(){ 
 
	$('[data-groupDrink="s1"]').addClass('active'); 
  $('.tabGroupDrink a').on('click', 
  	function(e){ 
    	e.preventDefault(); 
      var i = $(this).attr('href').substr(1); 
      $('[data-groupDrink]').removeClass('active'); 
      $('[data-groupDrink="'+i+'"]').addClass('active'); 
    } 
  ); 
 
});

[data-groupDrink] { 
  display: none; 
} 
[data-groupDrink].active { 
  display: inline-block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="tabGroupDrink"> 
  <a href="#s1">Праздничные</a> 
  <a href="#s2">Новые</a> 
  <a href="#s3">Особые</a> 
</div> 
<div class="listDrink"> 
  <span data-groupDrink="s1">Подарок 1-1</span> 
  <span data-groupDrink="s1">Подарок 1-2</span> 
  <span data-groupDrink="s1">Подарок 1-3</span> 
  <span data-groupDrink="s1">Подарок 1-4</span> 
  <span data-groupDrink="s1">Подарок 1-5</span> 
  <span data-groupDrink="s2">Подарок 2-1</span> 
  <span data-groupDrink="s2">Подарок 2-2</span> 
  <span data-groupDrink="s2">Подарок 2-3</span> 
  <span data-groupDrink="s2">Подарок 2-4</span> 
  <span data-groupDrink="s2">Подарок 2-5</span> 
  <span data-groupDrink="s3">Подарок 3-1</span> 
</div>

Все работает как надо, но тут заметил баг что при переходе по категориям те элементы которые отображаются в этой категории сначала стают видимым а через несколько миллисекунд происходит анимация zoomInUp. Баг не критичен но дергает глаз...

И еще может кто уже сталкивался с таким построением списка как у меня и делал wow анимации на нем подскажите как делать разные время в data-wow-delay от первого до пятого элемента.