Непрерывно показывать скрытые элементы с помощью путевых точек jquery

У меня есть список элементов, из которых показаны первые 2, а остальные скрыты css.

<div class="container">
    <ul>
      <!-- shown -->
      <li>content...1</li>
      <li>content...2</li>

      <!-- hidden -->
      <li>content...3</li>
      <li>content...4</li>
      <li>content...5</li>
      <li>content...6</li>
      <li>content...7</li>
    <ul>
  </div>

Теперь я хочу показать еще 2 элемента, когда я прокручиваю нижнюю часть до container div и так далее, пока не будут показаны все элементы. У меня уже есть функция showMoreItems(), которая показывает больше элементов. Мне просто нужно вызывать эту функцию каждый раз. Как я могу сделать это с помощью waypoint. Я смотрел на бесконечную прокрутку, но она используется для вызовов ajax. Но я не использую ajax. Элементы уже находятся в DOM, просто скрыты. Но ощущение такое же.

Это я использовал на другой странице, чтобы вызвать функцию, когда она появляется в поле зрения.

$el.waypoint( function( direction ) {
            if( direction === 'down' ) {
                animateNumber($el, $el_span, theNumber);
            }
        }, { 
                offset: '85%',
                triggerOnce: true,
        });