Некорректное отображение блоков с библиотекой AOS

Question

Очень странное поведение плагина AOS - когда обновляешь страницу, блоки с data-aos не отображаются. Но как только в браузере нажимаешь ctrl - или ctrl +(масштаб страницы), анимация начинает нормально проигрываться, и так до первого обновления страницы.

В чем причина может быть?

AOS через gulp подключен: js:

gulp.task('js', function() {
return gulp.src([
        'node_modules/aos/dist/aos.js',
        'node_modules/slick-carousel/slick/slick.js',
        'node_modules/magnific-popup/dist/jquery.magnific-popup.js'
    ])
    .pipe(concat('libs.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('app/js'))
    .pipe(browserSync.reload({ stream: true }))
});

css через @import (Scss потом конвертируется в один style.min.css)

@import "../../node_modules/aos/dist/aos";

Ну и AOS.init(); тоже подключен в html.

Answer 1

Я не знаток этой библиотеки, но в исходниках все четко написано. Есть несколько ключевых событий, на которые реагирует либа:

DOMContentLoaded или load - инициализирует либу - вешают handleScroll на событие window.onscroll, делает первый прогон handleScroll (во время которого блоки должны появится/исчезнуть в зависимости от позиции скролла на текущий момент).
resize и orientationchange - для рефреша инициализации.

Масштабирование через ctrl+/ctrl- триггерит resize событик и ваша либа запускается.

Вероятно, вам надо обратить внимание на свойство offset, которое при инициализации определяет триггер-значение отступа сверху, после которого запустить скрипт.

Answer 2

Причина в slick-carousel была. Yugofx, спасибо за ответ, покопался в исходниках, усвоил пару полезных плюшек. Сам в верстке пару недель.

Вот как решилась проблема со слайдером:

$('.slick-div').on('init', function(event, slick){
        AOS.init();
});

AOS только после инициализации самого слайдера грузится теперь и все ок.

БЛОГ НА HUSL

Некорректное отображение блоков с библиотекой AOS

Ответы (2 шт):