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

Question

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

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

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

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',
});
});

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

РЕДАКТИРОВАТЬ: я нашел частичное решение, которое вызывает анимации каждый раз, когда вы прокручиваете их. Тем не менее, я могу только заставить его работать с 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) {
      }
    });
  });