ローディングアニメーション後のアニメーションについて

[masa-9]

お世話になっております。

現在、お客様のサイト構築をしており、テーマ「Dawn」を使用してTOPページを表示する時に

ローディングアニメーションからカーテンアニメーション（右から左へカーテンが開くイメージ）を実装しています。

ローディングアニメーションは実装することができたのですが、カーテンアニメーションが表示されない状態です。

※ローディングアニメーションが終わると、何も起こらずTOPページが表示されます

カーテンアニメーションは、ディスカッションの質問を調べたり、外部サイトを確認しながら

ローカルの環境でHTML、CSS、JavaScriptを調整して実現できましたが

そのコードをスニペット配下に新規作成したloader.liquidに組み込んでみたところ、表示されませんでした。

実施した事と、loader.liquidのコードを記述しますので、

カーテンアニメーションを表示させるための改善点をご教示いただけると幸いです。

・スニペット配下に「loader.liquid」を新規追加

・「theme.liquid」のbodyタグ開始直後に「{% render ‘loader’ %}」を挿入

・「theme.liquid」のheadの閉じタグ直前に「」を挿入

なお、開発ツールからgsapが正常に読み込まれていることは確認済みです。

以下、loader.liquidに記載しているコードになりますので、お手数ですがご確認よろしくお願いいたします。

<aside id="loader" aria-hidden="true">
  <div class="loading-screen">
      <svg xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"
         style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto;"
         width="400px" height="400px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
         <g>
            <image x="0" y="0" width="100" height="123"
            xlink:href="YourImageFile"/>
          </g>
     </svg>
  </div>

<div class="curtain-container">
  <div class="curtain"></div>
</div>

 <style>
/* styles.css */

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  z-index: 9;
}

.curtain-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 99;
}

</style>

<script>

  const tl = gsap.timeline();
  const loading = document.querySelector('.loading-screen');

tl.to(loading, { duration: 2, opacity: 1  })
.to(loading, { opacity: 0  })
  .to('.curtain', {
    duration: 1.5,
    width: '0%',
    delay: 2,
  });
document.addEventListener('DOMContentLoaded', () => {
    tl.play();
});
  
</script>
          
</aside>