サイト調査 002：Stripe Capital

今回調べるのは Stripe Capital のサイト。
https://stripe.com/ja-gr/capital
ヒーローアニメーションをどのように実現しているのか調べるのが主目的。

HTMLソースを見ると何やらSVGタグが書かれている。
中身は空なので、JavaScriptで操作されているようだ。

  <svg
  class="HeroAnimation js-hero-animation"
  xmlns="http://www.w3.org/2000/svg"
>
  <defs>
    <image
      id="shadow"
      xlink:href="https://b.stripecdn.com/site-srv/assets/img/v3/capital/hero-animation-shadow-32c04f05490e3bea620352846dc0f7ea5c4c3553.png"
      width="456"
      height="168"
      onerror="this.style.display = 'none'"
    />
  </defs>
  <rect fill="#fff" width="100%" height="100%" />
  <g class='js-skew-container' transform='skewY(-12)'>
    <rect class="Helm__fill--slate9" width="100%" height="100%" />
    <g class='HeroAnimation__yContainer js-y-container'>
      <g class='HeroAnimation__xContainer js-x-container'>
      </g>
    </g>
    <rect fill="#fff" y="100%" width="100%" height="100%" />
  </g>
</svg>

対象のJavaScriptを読み込む部分がこちら。

<script src="/assets/compiled/js/9f392ff4d1373e2c-components-08de74bb3cc833e3b14d.min.js" defer></script>

ファイルの中身を見てみたところ、これが膨大でちんぷんかんぷん。
複数のJSファイルがまとめられているようだ。何かのフロントエンドフレームワークを使って、デプロイするとこういったJSファイルができるのだろうか。

ファイルの中でアニメーションの処理をしているらしき部分は見つけることができたものの、何を行っているのかはよく分からない。
手書きなのか、ツールを使って生成しているのかどうかも分からない。

あまり成果が上がらなかったが、今回はここまで。