Не знаю насчет настройки и других плагинов, но мне кажется проще будет на элементы вешать класс
wow во время их появления во вьюпорте, эффект тот же будет. Можно опираться на
этот алгоритм. Еще как вариант можно форкнуть WOW и переписать его чуть-чуть, делов на несколько минут.
Кстати,
whileScrolling это как раз то что нужно, разве что вы неправильно его используете - он вызывается постоянно при скролле, wow не нужно инициализировать каждую десятую долю секунды.
UPD: вешать класс
wow не получилось, новые элементы почему-то не подхватываются. Если вас устроит независимость от
wow, то можете объявить CSS класс
horizontal-wow:
.horizontal-wow {
visibility: hidden;
animation-name: null;
}
Соответственно, в разметке надо будет использовать его вместо
wow. Скрипт получился некрасивый:
Без WOW, только animate.cssjQuery.fn.extend({
custom_onAppearanceApply: function( f, container ) {
var $container = $( container ),
container_width = $container.width(),
array_of_$elements = [];
this.each(function(i,el) {
array_of_$elements.push($( el ));
})
scrollHandler();
function watchProcessedElements(array_of_indexes) {
var l, i;
for (l = array_of_indexes.length, i = l - 1; i > -1; --i) {
array_of_$elements.splice(array_of_indexes[i], 1);
}
}
function scrollHandler() {
var i, l, processed = [];
for ( l = array_of_$elements.length, i = 0; i < l; ++i ) {
if (-container.mcs.left + container_width > array_of_$elements[i].position().left) {
f.call( array_of_$elements[i] );
processed.push(i);
}
}
if (processed.length) {
watchProcessedElements(processed);
}
}
return {
scrollHandler: scrollHandler
};
}
})
$(window).load(function() {
if ($(".js-page-scroll").length) {
var scrollHandler = $.noop,
scrollHandlerWrapper = function() {
scrollHandler();
};
$(".js-page-scroll").mCustomScrollbar({
axis: "x",
theme: "dark-3",
advanced: { autoExpandHorizontalScroll: true },
callbacks: {
onInit: function() {
scrollHandler = $('.horizontal-wow').custom_onAppearanceApply(function () {
var old_animation = this.css('animation-name'),
$this = this;
$this.css('animation-name', 'clear').addClass('animated');
setTimeout(function() {
$this.css({
'visibility': 'visible',
'animation-name': ''
});
})
}, this).scrollHandler;
},
whileScrolling: scrollHandlerWrapper
}
});
}
});
