Как правильно запускать анимацию у элементов когда они появляются во вьюпорте?

Question

[Dubrovin]

Подключаю Animate.css, не понимаю, как реализовать запуск анимации на элементе, когда он появляется во вьюпорте?
Какой алгоритм создания такого функционала без jQuery?

Comments

[Даниил Попов]

Следить за скроллом и запускать

Answer 1

[Ihor Bratukh]

Wow.js (no jquery)

Answer 2

[tyzberd]

Как и с jQuery. Вешаем событие на скролл. Для каждого элемента проверяем отступ от начала документа, если скролл == высоте отступа, тогда запускаем анимацию.

Comments

[Dubrovin]

Не понятно, как именно "запускать" анимацию. Например, у меня есть элемент с классами animate и fade, что нужно сделать, чтобы запустить анимацию на нём?

[Сергей delphinpro]

Dubrovin, Вы как раз и должны добавлять и удалять эти классы.
Просто откройте пример https://daneden.github.io/animate.css/ в devtools, понажимайте кнопку и посмотрите как оно работает.

[tyzberd]

вот на jQuery

$(document).ready(function () {
    (function () {
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        window.requestAnimationFrame = requestAnimationFrame;
    })();
    var windowHeight = $(window).height();
    function animate(timelineBlock, time) {
        timelineBlock.each(function () {
            if ($(this).offset().top <= $(window).scrollTop() + windowHeight * time && $(this).hasClass("invisible")) {
                $(this).removeClass("invisible").addClass("animated slideInUp")
            }
        });
    }

    var timelineBlock = $('.js-timeline-animate'), time = 1;
    $(window).on('scroll', function () {
        requestAnimationFrame ? requestAnimationFrame(function () {
            animate(timelineBlock, time)
        }) : setTimeout(function () {
            animate(timelineBlock, time)
        }, 100)
    })
});

[Dubrovin]

tyzberd, я правильно понимаю, что я могу присвоить классы animated, invisible, slideInUp элементу сразу же и убирать класс invisible как только сработает событие по скроллу? Этого достаточно чтобы анимация запустилась?

[tyzberd]

нет, сразу все присвоить не получится. Класс с названием анимации, должен добавляться потом.
animated вроде как можно сразу, но не уверен.
invisible это класс с bootstrap, он просто скрывал текст, может вам он не нужен

.invisible {
  visibility: hidden !important;
}