手書きしているように筆記体の文字などをアニメーションさせる方法をご紹介します。今回アニメーションさせるのは以下の文字です。

SVG、Figma、GSAP（https://gsap.com/）の3つを使って簡単に実装できます。

1．Figmaで下準備（SVGの作成）

Figma で好きな文字を入力したあと、線のアウトライン化を行います。

次に筆記体の文字を、書き順通りまた一筆書きになるよう、ペンツールを使ってベジェ曲線でなぞっていきます。
下記のように一筆書きになるように留意しましょう。※途切れているとうまくアニメーションされません。

このとき、元の文字が完全に隠れるように線の太さを調整します。
※あとでマスクとして使用するため

元の文字（アウトライン化済み）となぞったベジェ曲線を選択し、マスクとして使用を選びます。
下記のようなレイヤーが作成されていればOKです。

最後にマスクした要素全体（ここではレイヤー名「Mask group」の要素）ごと、SVGとしてコピー※します。
※右クリック→「コピー/貼り付けオプション」→「SVGとしてコピー」を選びます。

2．コピーしたSVGをHTMLに貼り付け

maskのidは任意のものを設定してください。なお、idとmask="url(#~~)"は同じになるように留意してください。
下記の例だと、id="cursiveMask" 、mask="url(#cursiveMask)"のような形になります。

3．GSAPで手書き風にアニメーションさせてみる

完成形はこちら↓

3-1．マスク（mask）の長さを取得

getTotalLength()を使って下記のように文字のパスの長さを取得します。

const maskLen = document.querySelector("#cursiveMask path").getTotalLength();

3-2．GSAPのfromToでアニメーションをセット

最初にfrom（開始状態）をセットします。
strokeDasharray、strokeDashoffsetを3-1で取得したmaskの長さ（maskLen）にセットしておきます。

stroke-dasharrayは、破線の長さを指定するCSSプロパティです。値をmaskLen（デフォルト値）にしておくことで、1本の破線で構成されている状態になります。

stroke-dashoffsetは、パスの描画開始位置を指定するCSSプロパティです。値をmaskLen（デフォルト値）に設定すると、破線の描画開始位置がパスの長さ分「先送り」されるため、パスが完全に見えなくなります。

次にto（変化後の状態）を設定します。
strokeDashoffset: 0にセットします。これによってパスがすべて描画されている状態となります。
あとはdurationやeaseでアニメーションのタイミングやイージングを調整して完成です！

gsap.fromTo('#cursiveMask path', 
　{
  　strokeDasharray: maskLen,
  　strokeDashoffset: maskLen,
　},
　{
  　strokeDashoffset: 0,
  　duration: 2,
  　ease: "power1.inOut" 
　});

まとめ

今回はSVGとGSAPで手書き風アニメーションを実装する方法をご紹介しました。

GSAPとFigmaを使えば簡単に実装できるので、ぜひオープニングアニメーションなどで使ってみてください。

svg / js / GSAP / Figma