Как запускать анимацию на прокрутке с помощью Waypoints.js

Question

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

Я пробовал использовать плагин jQuery Inview, но я не мог заставить его делать то, что хотел. Затем я переключился на Waypoints.js, и я вроде как работаю, но это не идеально. Прямо сейчас, элементы ожидают, когда я прокручиваю их в первый раз, но они ничего не делают, когда я просматриваю и отступаю страницу. Анимации срабатывают только один раз.

Ниже мой текущий код. Если кто-то может помочь мне выяснить способ запуска анимации каждый раз, когда пользователь прокручивается мимо них, а также способ скомпенсировать код, чтобы он срабатывал на основе класса, а не идентификатора, - это было бы действительно отлично. (Прямо сейчас у меня есть отдельная функция для каждого элемента.)

PS: Я использую animate.css, wow.js, textillate.js для анимации.

HTML

<h1 class="lettering wow fadeInDown" id="l1" data-in-effect="flipInY">Yo. Check it out.</h1> 

JQuery

$(function() { 
var l1 = $("#l1"); 
var waypoint = new Waypoint({ 
    element: document.getElementById('l1'), 
    handler: function() { 
     l1.textillate({ in: { effect: 'flipInY' } }); 
    }, 
    offset: 'bottom-in-view', 
}); 
}); 

Спасибо за вашу помощь!

EDIT: Я нашел частичное решение, которое запускает анимацию каждый раз, когда вы прокручиваете их. Тем не менее, я могу только заставить его работать с ids. Я предпочел бы настроить таргетинг на class, чем написать отдельную функцию для каждого нового заголовка. Любые идеи о том, как изменить следующий код, чтобы он работал для класса .lettering?

// Animate #l1 
$(function() { 
var animatel1 = $('#l1').textillate({ 
    autoStart: false, 
    in: { effect: 'flipInY' }, 
    out: { effect: 'fadeOut', sync: true, } 
}); 

var l1 = $("#l1"); 
var inview = new Waypoint.Inview({ 
    element: $('#l1'), 
    enter: function(direction) { 
    }, 
    entered: function(direction) { 
    animatel1.textillate('in') 
    }, 
    exit: function(direction) { 
    animatel1.textillate('out') 
    }, 
    exited: function(direction) { 
    } 
}) 
}); 

Answer 1

Работа с классом связана с циклом элементов массива. Я вижу, что вы используете JQuery, так что он может помочь вам с битой шаблонным:

$(function() { 
    $('.your-class').textillate({ 
     autoStart: false, 
     in: { effect: 'flipInY' }, 
     out: { effect: 'fadeOut', sync: true, } 
    }); 

    $('.your-class').each(function() { 
    new Waypoint.Inview({ 
     element: this, 
     entered: function(direction) { 
     $(this.element).textillate('in') 
     }, 
     exit: function(direction) { 
     $(this.element).textillate('out') 
     } 
    }); 
    }); 
}); 

Answer 2

Это то, что работает для меня. Необходимо обернуть все в функции .each(). Замените lettering на ваше имя класса, и вам должно быть хорошо идти.

$('.lettering').each(function() { 
    var animatelettering = $('.lettering').each(function(){ 
     $(this).textillate({ 
      autoStart: false, 
      in: { effect: 'flipInY' }, 
      out: { effect: 'fadeOut', sync: true, } 
     }); 
    }); 
    new Waypoint.Inview({ 
     element: this, 
     enter: function(direction) { 
     }, 
     entered: function(direction) { 
     animatelettering.textillate('in') 
     }, 
     exit: function(direction) { 
     animatelettering.textillate('out') 
     }, 
     exited: function(direction) { 
     } 
    }); 
    });