アニメーションの実装について

[masa-9]

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

テーマは「Dawn」を使用しており、TOPページを表示する時に

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

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

カーテンアニメーション自体は、ローカルの環境でHTML、CSS、JSを調整して実現できた状態で

そのコードをloader.liquidに組み込んでみましたが、表示されませんでした。

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

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

・スニペット「loader.liquid」を追加

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

・「theme.liquid」のheadの閉じタグ直前に「<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>」を挿入

※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="画像ファイル"/>
          </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>