スクロールした時に要素が出てくるアニメーションのライブラリを使うと、最初の読み込み時レイアウト崩れが発生してしまうのを防ぎたいです。

Question

前提・実現したいこと

スクロールしていくと、要素が次々と現れる、「ScrollReveal」というJSライブラリを使いつつ、
レイアウト崩れを防ぎたいです。

発生している問題・エラーメッセージ

そのアニメーションを誤って併用していることによってこの問題が起きているようです。
↓これを適用させようとすると、

ScrollReveal().reveal('.animation3', { 
    duration: 2000, 
    origin: 'right', 
    distance: '50px',
    viewFactor: 0.5,
  });

背景固定にしているファーストビューの部分や、ほかレイアウトが崩れます。
画像のような状態になってしまいます。

該当のソースコード

↓いっぱい書いてありますが、単純に、要素にあわせて、出てくるスピードを変えたかったので、
このようにしています。

ScrollReveal().reveal('.animation1', { 
    duration: 1500, 
    origin: 'top', 
    distance: '50px',
    viewFactor: 0.3,
  });

  ScrollReveal().reveal('.animation2', { 
    duration: 1000, 
    origin: 'bottom', 
    distance: '50px',
    viewFactor: 0.2,
  });

ScrollReveal().reveal('.animation3', {  ←恐らく問題の記載部分
    duration: 2000, 
    origin: 'right', 
    distance: '100px',
    viewFactor: 0.5,
  });
  
  ScrollReveal().reveal('.animation4', { 
    duration: 2000, 
    origin: 'left', 
    distance: '100px',
    viewFactor: 0.5,
  });

  ScrollReveal().reveal('.animation5', { 
    duration: 3500, 
    origin: 'left', 
    distance: '80px',
    viewFactor: 0.1,
  });

  ScrollReveal().reveal('.animation6', { 
    duration: 3500, 
    viewFactor: 0.5,
  });
  
  ScrollReveal().reveal('.animation7', { 
    duration: 3500, 
    origin: 'bottom', 
    distance: '80px',
    viewFactor: 0.1,
  });

  ScrollReveal().reveal('.animation8', { 
    duration: 4000, 
    origin: 'left', 
    distance: '150px',
    viewFactor: 0.5,
    opacity: 1,
  });

  ScrollReveal().reveal('.animation9', { 
    duration: 1500, 
    origin: 'top', 
    distance: '50px',
    viewFactor: 0.8,
    scale: 3,
  });

  ScrollReveal().reveal('.animation10', { 
    duration: 1500, 
    viewFactor: 0.2,
  });

HTML側のクラス名に書き、制御するタイプのライブラリです。

<main>
        <section class="threecommitment">
            <div class="threecommitment-content">
                
                <div class="box price">    
                    <div class="subject price-content animation1">
                        <h3>01.PRICE</h3>
                        <h4>高品質な家具をお手頃価格で</h4>
                        <p>テキスト</p>
                    </div>
                    <figure class="animation7"><img src="img/commit01.png" alt="PRICEイメージ画像"></figure>
                </div>

                <div class="box specialty">
                    <div class="subject specialty-content animation1">
                        <h3>02.SPECIALTY</h3>
                        <h4>専門店としての知識と技術</h4>
                        <p>テキスト</p>
                    </div>
                    
                    <figure class="animation7"><img src="img/commit02.png" alt="SPECIALTYイメージ画像"></figure>
                </div>

                <div class="box design">
                    <div class="subject design-content animation1">
                        <h3>03.DESIGN</h3>
                        <h4>洗練されたデザイン</h4>
                        <p>テキスト</p>
                    </div>
                    <figure class="animation7"><img src="img/commit03.png" alt="DESIGNイメージ画像"></figure>
                </div>
            </div>
        </section>

        
        <section class="anniversary">
                            <figure class="animation8"><img src="img/est1990_1.png" alt="メモリアルプレート"></figure>

            <div class="anniversary-content">
                <div class="anniversary-content-writing">
                    <p class="est animation1">EST.<br>1990</p>

                    <p class="thankyou animation3">Thank you very much！</p> ←ここで右から出るアニメーションを使っています。

                    <div class="text animation7">
                        <p テキスト</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

/*---3COMMITMENTファーストビュー---*/
.introduction {
  background-image: url(../img/back_commitment.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
 ↑これがIOSだとうまくうごかないとのことだったので

@media (max-width: 667px) {
  .introduction {
    background-image: none;
  }
}
 ↑スマホバージョンでは、これを解除して、

.introduction-content {
  width: 50%;
}

@media (max-width: 667px) {
  .introduction-content {
    background: rgba(0, 0, 0, 0.555);
    padding: 5%;
    width: 90%;
    margin: 5% auto;
  } 
 ↑これはスクロール部分の、透明黒背景の部分です
  .introduction-content:before {
    content: "";
    display: block;
    position: fixed; 
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(../img/back_commitment2.jpg) center no-repeat;
    background-size: cover;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
 ↑スマホバージョンの背景画像固定の部分です

.introduction-content .title {
  padding: 30% 0;
}

.introduction-writing {
  padding: 0 10%;
  height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
}

@media (max-width: 667px) {
  .introduction-writing {
    position: static;
  }
}
 ↑一応   position: sticky;もスマホバージョンでは解除しました。


 ↓右から出てくるアニメーションを適用させている要素の、CSSです。
.anniversary-content-writing {
  width: 90%;
  padding-bottom: 20%;
  margin-left: 38%;
}

@media (max-width: 667px) {
  .anniversary-content-writing {
    width: 100%;
    margin-left: 0%;
    padding: 0%;
  }
}

.anniversary-content .text {
  width: 55%;
}

@media (max-width: 667px) {
  .anniversary-content .text {
    padding: 10%;
  }
}

.anniversary-content .thankyou {
  font-size: 32px;
  font-family: "playfair-display", serif;
  font-style: normal;
  font-weight: 900;
  line-height: 1em;
  font-style: italic;
  padding: 5% 10%;
}

@media (max-width: 667px) {
  .anniversary-content .thankyou {
    font-size: 24px;
    padding: 5%;
  }
}

試したこと

・同様に、JSにscale: 1を設定したときも同じことが起こりました。
・paddingやmarginを消してみたのですが、そうすると、アニメーション終了時のレイアウトが崩れ、余白もなくなりませんでした。
・「スクロール中にクラスを付与してposition:fixed;を指定しても描画はCPUが行うのでスクロールが終わるまで反映されない」という記事を拝見し、transform: translate3d(0, 0, 0);を、position:fixed;を設定した要素にいれてみまちたがどうやら見当違いのようでした。
・distanceを、 '10px',にしてみたところ解消されましたが、右からふわっと出てくるアニメーションのよさが消えてしまいました。

ScrollReveal().reveal('.animation3', { 
    duration: 2000, 
    origin: 'right', 
    distance: '10px',
    viewFactor: 0.5,
  });

・これが最後の手でした。いっそ、隠してしまおうと思い、下記を入れてみました。⇒だめでした。

body{
    overflow-x: hidden;
}

---

お聞きしたいことまとめ

1. なぜ、右から出てきたり、拡大してから元の大きさに戻る「scale」などを使うと、こうしてレイアウトが一気に崩れてしまうのでしょうか。
2. どうして、overflow-x: hidden;が効かないのでしょうか。

長くなってしまい、大変恐縮ですが、どうぞ宜しくお願いいたします。

Answer 1

右からのアニメーションを諦めることで、問題は完全に解決しました。
もし良いアイディアがありましたら、引き続き調べていきたいです。
お騒がせしましたm(_ _)m