Плавность Skrollr's ломается от вершины данных к вершинам данных сверху вниз

Question

У меня есть анимация skrollr, которая в основном скользит в теге H2 снизу вверх и внизу сверху вниз. Они оба зафиксированы и выровнены так, чтобы располагаться горизонтально по центру на экране, когда их родитель находится вверху экрана.

Когда родитель находится в верхней части экрана, тег h2 центрируется, а верхняя часть правого div-элемента находится вверху экрана, и это здорово, проблема в том, что правый div-элемент должен скользить вниз и исчезать с экрана, когда низ родителя достигает вершины, но он просто ломается и опускается без какой-либо анимации.

Почему это происходит? Высота родителей такая же, как высота правого бокса

Вот пример кода того, как я это делаю:

<section class="sliderInSection" id="clients">

 <div class="leftSide">
    <h2
        data-anchor-target="#clients"
        data-bottom-top="top: 100%; opacity: 0;"
        data-top="top: 50%; opacity: 1;"
        data-top-bottom="top: -50%; opacity: 0;"
    ><span>Our<br/>Clients</span>
         <div class="arrow"></div>
    </h2>
 </div>

   <div class="rightSide"
    data-anchor-target="#clients"
    data-bottom-top="top: -100%; opacity: 0;"
    data-top="top: 0%; opacity: 1;"
    data-top-bottom="top: 100%; opacity: 0;"
>
           <p>here is content</p>
    </div>


</section>