Не работает анимация aos с fullpage.js

Fullpage.js весьма популярный скрипт для работы с сайтом, который позволяет интересно представить контент на сайте. В связи с этим часто бывает так, что дополнительные анимационные скрипты могут либо вообще не работать с fullpage.js, либо работать, но с ошибками.

Сегодня мы рассмотрим такой скрипт, который часто хочется использовать совместно с fullpage.js — это AOS анимирование. Если Вы его подключите стандартным способом, то скрипт работать у Вас не будет. Чтобы исправить данную вещь Вам необходимо проделать следующие шаги.

AOS и Fullpage.js — заставляем анимацию работать

Первый шаг. Убедиться, что на вашем сайте есть подключение к JQuery. Мы будем исправлять эту ошибку с помощью этой библиотеки.

Второй шаг. Подключаем скрипты в следующей последовательности. Первый — AOS, затем FULLPAGE.JS и затем файл скриптов, в котором будем прописывать свои стили. FULLPAGE.JS и файл наших скриптов подключаем в футер сайта.

Третий шаг. Настройка вызова скрипта fullpage.js с учетом его работы с библиотекой AOS. Данный код давайте рассмотрим ниже более подробно. Сначала я приведу его полностью, а затем прокомментирую некоторые моменты.

var app = {
    init: function () {
    	AOS.init();
		$('.aos-init').removeClass('aos-animate'); // удаляем все классы, которые запускают анимацию
        app.initFullPage();
    },
    initFullPage: function () {
        new fullpage("#fullpage", { 
        	autoScrolling: !0, 
        	scrollHorizontally: !0, 
        	navigation: !0, 
        	navigationTooltips: ["", "Первое", "Второе", "Третье", "Четвертое", "Пятое"], 
        	showActiveTooltip: !0,
		    onLeave: function(){
		        jQuery('.section [data-aos]').removeClass("aos-animate");
		    },
		    onSlideLeave: function(){
		        jQuery('.slide [data-aos]').removeClass("aos-animate");
		    },
		    afterSlideLoad: function(){
		        jQuery('.slide.active [data-aos]').addClass("aos-animate");
		    },
		    afterLoad: function(){
		        jQuery('.section.active [data-aos]').addClass("aos-animate");
		    }       	
        });
    },
    scrollTop: function () {
        window.scrollTo({ top: 0, behavior: "smooth" });
    },
};
app.init();

Сразу отмечу, Вы вольны по своему желанию создавать функцию, но мне так удобнее. Итак, создаем переменную app с функцией init, которую вызываем в конце данного скрипта.

Функция init() в свою очередь первым делом инициализирует анимацию AOS. Далее удаляем с помощью JQuery все классы с анимациями. Запускам функцию инициализации скрипта fullpage.js.

В функции initFullPage() мы размещаем все стандартные наши свойства, которые предоставляет fullpage.js, но в самом конце после showActiveTooltip: !0, мы размещаем важнейший код, который и исправляет все наши проблемы с AOS анимациями. Данный код при удаляет и добавляет классы анимаций, благодаря чему работа скриптов не нарушается и все работает так, как нужно. Далее спокойно следуйте инструкциям по анимациям на сайте AOS и все будет работать.

Если есть какие-либо вопросы, смело задавайте их в комментариях. Спасибо.