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

Question

[Анастасия]

Всем привет
У меня есть сайт который делится на секции. И при достижении каждой секции показывается css анимация в виде анимированной линии.
Div с линией имеет display none. При достижении секции, в которой есть класс .line__decorators , этот блок показывается с помощью функции:

$(window).scroll(function() {
    var hT = $('.line__decorators').offset().top,
        hH = $('.line__decorators').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT + hH - wH)) {
        $('.line__decorators').show();
    }
});

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

P.S. Пример линий которые я хочу реализовать у себя на сайте https://tigers.pl/

Answer 1

[ildar-meyker]

Ваша задача состоит в том, чтобы рассчитать процент попадания каждой секции во viewport. Это если хочется большой точности принятия решений. Но в вашем случае вполне поможет какой-нибудь imakewebthings.com/waypoints.