Сложная анимация похожих элементов: как справиться с JavaScript?

Question

У меня есть раздел с 4 цифрами, который выглядит следующим образом:

<figure class="s_figure">
    </figure>
    <figure class="s_figure">
    </figure>
    <figure class="s_figure">
    </figure>
    <figure class="s_figure">
    </figure>

Каждая фигура содержит div с img в нем и figcaption с заголовком и текстом.Однако единственными элементами, которые нужно анимировать, являются сами фигуры.Я хочу создать своего рода анимацию, которая будет работать для каждой фигуры с небольшой разницей.На самом деле, это переходы, и я хочу, чтобы они вели себя как переходы, но я представил их в виде анимации, чтобы визуально прояснить, что я хочу сделать.Опять же: я хочу сделать переходы, чтобы элементы поддерживали свое состояние, а не воспроизводили анимацию.Есть анимация:

@keyframes Appear-Up {
    from {
        transform: translateY(40px);
        opacity: 0;
    };
    to {
        transform: translateY(0);
        opacity: 1;
    };
};
@keyframes Disappear-Up {
    from {
        transform: translateY(0px);
        opacity: 1;
    };
    to {
        transform: translateY(-40px);
        opacity: 0;
    }
};
@keyframes Appear-Down {
    from {
        transform: translateY(-40px);
        opacity: 0;
    };
    to {
        transform: translateY(0px);
        opacity: 1;
    };
};
@keyframes Disappear-Down {
    from {
        transform: translateY(0px);
        opacity: 1;
    };
    to {
        transform: translateY(40px);
        opacity: 0;
    };
};

И вот что я сделал со сценарием до сих пор:

document.addEventListener("scroll", ():void => {
      let scrollTop = document.documentElement.scrollTop;
      let s_figures:any = [].slice.call(document.getElementsByClassName("s_figure"));
      for (let s_figure of s_figures) {
        if (scrollTop >= 140 + s_figures.indexOf(s_figure)*132) {
      s_figure.style.animation = "Appear-Up 1s";//132 is figure height
      s_figure.style.opacity = "1";
    } else {
      s_figure.style.animation = "none";/*this is done so that every time I scroll past (140 + s_figures.indexOf(s_figure)*132) animation would trigger*/


    s_figure.style.opacity = "0";/*this is done so that when I scroll past (140 + s_figures.indexOf(s_figure)*132) for the very first time figures would not be visible before the animation triggers*/
        };          
}

        });

И основная идея того, что я хочу сделать, заключается в следующем:

1. Когда пользователь прокручивает мимо (140 + s_figures.indexOf(s_figure)*132), должна запускаться анимация Появление

2. Если пользователь желает вернуться назад и прокрутить вышечем (140 + s_figures.indexOf(s_figure)*132), анимация «Исчезновение-Вниз» должна запускаться

3. Если пользователь прокручивает мимо (140 + 650 + s_figures.indexOf(s_figure)*132) / 650 - высота раздела, содержащая цифры /,анимация Исчезновение-Вверх должна быть запущена

4. Если после выполнения 3-го задания пользователь решит вернуться назад и прокрутить выше (140 + 650 + s_figures.indexOf(s_figure)*132), анимация Появление-Вниз должна быть запущена

Я понимаю, что это очень специфический случай, и я мог объяснить его неправильно.Тем не менее, я очень ценю помощь каждого, кто решит эту проблему.

Заранее большое спасибо.