javascript - Skrollr のスムーズさは、データのトップからデータのトップ、ボトムへと変化しています

Question

私は、基本的にH2タグを下から上にスライドさせ、上からdivを同時に下にスライドさせるskrollrアニメーションを持っています。親が画面の上部にある場合、それらは両方とも固定配置され、画面の中央に水平に配置されます。

親が画面の上部にある場合、h2 タグは中央に配置され、rightSide div の上部は画面の上部にあります。問題は、rightSide div が下にスライドして画面からフェードアウトすることになっていることです。親の下部が上部に到達しますが、アニメーションなしで壊れて下に移動します。

なぜこれが起こるのでしょうか？親の高さは rightSide 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>