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

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

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

вот на 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)
    })
});

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

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

.invisible {
  visibility: hidden !important;
}