Не работает анимация секций в fullpage.js + animate.css (wow.js)?

Question

[Иван Гордиенко]

Доброго времени суток. Есть конструкция.

<section class="main__section">
		<div id="fullpage">
			<div class="section" id="section0">
				<div class="intro">
					<h1></h1>
					<img class="animated fadeInRight" src="/img/logo.png" alt="">
				</div>
			</div>
			<div class="section" id="section1">
				<div class="intro">
					<h1 class="animated fadeInLeft">ТЕСТОВЫЙ ЭКРАН</h1>
				</div>
			</div>
			<div class="section" id="section2">
				<div class="intro">
					<h1 class="animated fadeInLeft">ТЕСТОВЫЙ ЭКРАН</h1>
				</div>
			</div>
			<div class="section" id="section3">
				<div class="intro">
					<h1 class="animated fadeInLeft">ТЕСТОВЫЙ ЭКРАН</h1>
				</div>
			</div>
		</div>
	</section>

И получается, что при загрузке страницы срабатывают сразу все анимации, анимации всех секций, требуется же сделать так, чтобы при открытии секции (а тут получается, что секция = экран), срабатывает анимация самой секции, либо её элементов, когда они загружены, а не сразу после загрузки всей страницы.

Есть ли выход?

Answer 1

[Алекс Глебов]

Можно по событиям fullpage добавлять классы animate.css на активном слайде
https://github.com/alvarotrigo/fullPage.js/tree/ma...

Comments

[Иван Гордиенко]

Спасибо, отметил решение + мой живой пример ниже.

Answer 2

[Иван Гордиенко]

Плагин fullpage.js аналогичен pagepiling.js
Второй, почему-то, работает у меня лучше и ниже представлен пример подключения и инициализации скрипта. Каждую секцию нужно описывать как в алгоритме ниже, что можно доработать, но при моём количество блоков достаточно добавить вручную каждую секцию и продиктовать её анимацию. Есть небольшая проблема при подключении файла стилей, но решается копией стилей из examples.css (pagepiling.js) в Ваш main.css (как пример).

var deleteLog = false;

		$(document).ready(function () {
			$('#pagepiling').pagepiling({
				menu: '#menu',
				anchors: ['page1', 'page2', 'page3'],
				onLeave: function (index, nextIndex, direction) {
					if (deleteLog) {
						$('#callbacksDiv').html('');
					}
					$('#callbacksDiv').append('<p>onLeave - index:' + index + ' nextIndex:' + nextIndex + ' direction:' + direction + '</p>')
				},
				afterRender: function () {
					$('#callbacksDiv').append('<p>afterRender</p>');
				},
				afterLoad: function (anchorLink, index) {
					$('#callbacksDiv').append('<p>afterLoad - anchorLink:' + anchorLink + " index:" + index + '</p>');

					//section 2
					if (index == 2) {
						//moving the image
						$('#section2').find('.intro').delay(100).animate({
							left: '0%'
						}, 1500, 'easeOutExpo', function () {
							$('#section2').find('p').first().fadeIn(700, function () {
								$('#section2').find('p').last().fadeIn(600);
							});
						});
					}

					//section 3
					if (index == 3) {
						//moving the image
						$('#section3').find('.intro').delay(100).animate({
							left: '0%'
						}, 1500, 'easeOutExpo', function () {
							$('#section3').find('p').first().fadeIn(700, function () {
								$('#section3').find('p').last().fadeIn(600);
							});
						});
					}

					deleteLog = true;
				}
			});
		});