Как подружить wow.js (animate.css) и fullpage.js?

Question

[tokieee]

Имеется сайт: investkuban.ru/presentation
На нем реализованы анимации с помощью wow.js + animate.css.

Сделана одноэкранная версия этого сайта с помощью fullpage.js: imatte.ru/work/term

Но анимация по понятным причинам не работает.

Нагуглил похожий вопрос на стаке, попробовал сделать так для одного элемента, но безрезультатно:

$('#fullpage').fullpage({
		verticalCentered: false,
		autoScrolling: false,
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
			if ( slideIndex == 1 ) {
				var that = $('#wrap2');
				that.find('.item_left').addClass('fadeIn wow').data('wow-duration','1.5s').data('wow-delay','2s');
			}
		}
	});

Подскажите, как заставить анимацию работать?

Answer 1

[tokieee]

Решил проблему следующим образом:

$('#fullpage').fullpage({
		verticalCentered: false,
		autoScrolling: false,
		easing: 'linear',
                easingcss3: 'ease',
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){

			if ( slideIndex != 0 ) {
			    wow = new WOW(
			      {
			        animateClass: 'animated',
			        live: true
			      }
			    );
		        wow.init();
	            }
		},
		onSlideLeave: function(anchorLink, index, slideIndex, direction){
			$('.slide').not('.slide-' + slideIndex).find('.wow').css('visibility', 'hidden');
		}
	});

Answer 2

[painmaker]

Возможно, все же кому-то понадобится (все же в выдаче гугл ссылается сюда сразу после стековерфлоу). Сам столкнулся с этой проблемой. Решение гораздо проще, чем есть на самом деле. В настройках fullPage ставим scrollBar: true, а в css задаем html, body { overflow: hidden}. Наслаждаемся. как пример - случайно наткнулся на живой пример codepen.io/kozaru/details/pgoJMM

Comments

[Roman Egliens]

большое спасибо!

[Асылбек]

Спасибо!!! Помог. Намучился 2 дня.

Answer 3

[Антон]

скорее всего анимации показываются по событию scroll, а при нажатии по стрелкам это событие не происходит

Comments

[tokieee]

Если я правильно понял то, что ответили в вопросе на стаке -- нужно добавить:

autoScrolling: false

И тогда будет воспринимать, как скролл. Я это сделал.