GSAPでSVGのパスを動かしてみた
web制作会社のフロントエンジニアとして一年が過ぎました。
色々得た知識の中でも特にGSAPは便利なライブラリだと感じています。
（つまづくことも多いですが...）
今回は、GSAPでSVGのパスを動かしてアニメーションを実装してみたので、その手順を書いていきます。
GSAPとは？
GSAPとはJavaScriptライブラリで、アニメーションを簡単に実装できるライブラリです。
今回は、SVGのパスを動かすために使用します。詳しい説明は今回省くのでもっと知りたい方は公式サイトを参照してください。私はいつもお世話になっているこちらの記事も参考にさせていただきました。
とりあえず、実行結果を見てみる
解説
青色の要素（boxクラス）をclip-pathプロパティで長方形のSVGで切り取り（長方形は青色要素より大きい図形のため切り取る、といっても画面上は変化なしです）、その後に長方形のSVGをアニメーションさせています。
clip-pathプロパティで切り抜くSVG画像はそのままだと下に空白ができてしまうので、widthとheightを0にしています。
また、長方形のSVGは下記のように記述しています。
<svg width="1512" height="1110" fill="none" viewBox="0 0 1512 1110">
<clipPath id="clipOpening" clipPathUnits="objectBoundingBox">
<path class="js-clip-svg" fill="#FF9800"
d="M 0 0 V 1110 C 197 1110 463 1110 756 1110 C 1048 1110 1314 1110 1512 1110 V 0 H 0 Z"
transform="scale(0.00066,0.0009)" />
</clipPath>
</svg>
このコードのSVG画像はこちら
clipPathUnits="objectBoundingBox"とtransform="scale(0.00066,0.0009)"を指定することで、画面幅が可変した場合に比率を保ってSVGも可変することができます。
transform="scale(0.00066,0.0009)"の"0.00066,0.0009"は、widthとheightをそれぞれ1512,1110にしたときの値です。
transform="1/width,1/height"の値を指定することで、画面幅が変わっても比率を保ってSVGを表示することができます。
長方形のSVGパスをattrでd属性を変化させることによってアニメーションさせています。
最終形態のSVGパスは下記の形です。
SVGのパスを作る上記図のwebツールはこちら
最終形態のSVGパスをy軸に対してマイナス数値の場所に描くことによって、表示されている画面を突き抜けることができます。（ちなみに変化前と変化後のSVGのアンカーポイントは同じ数の方がきれいにアニメーションできる気がします。）
GSAPはSVGのパスをアニメーションできるだけでなく、CSS変数・CSSプロパティのアニメーションも実装できます。ぜひ、使ってみてください。
Discussion