GSAPには様々なアニメーションを実装するために便利な拡張プラグインがたくさん用意されています。有料のものもありますが無料で利用できるものも結構あるので使わない手はないですよね。今回はその中で「MotionPath」プラグインをつかってパスに沿って要素をアニメーションさせてみたいと思います。   （過去の参考記事もどうぞ） React（JSX・TSX）のコンポーネントでGSAPを使ってみる ＃2：スクロール固定表示のアニメーション React（JSX・TSX）のコンポーネントでGSAPを使ってみる ＃1：要素のアニメーション GSAPとvivusを使ったSVGのドローアニメーション GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用 GSAPでFlipプラグインを使って要素の移動やサイズ変化にトランジションのアニメーションをつける＃1：基本編 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃3：スクロールで固定表示 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃2：スクロール量に連動 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃1：基本編 JavaScriptのアニメーションライブラリ「GSAP」を使ってみる   これまでにもGSAPのプラグインでは「ScrollTrigger」や「Flip」プラグインを使ってきましたが、今回も同様にプラグインのソースコードを追加で読み込んで実装していきます。

import { gsap } from 'gsap';
import { MotionPathPlugin } from 'gsap/MotionPathPlugin';
gsap.registerPlugin(MotionPathPlugin);

  もちろんCDNでも利用可能です。GSAPのコアとプラグインのスクリプトを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/VERSION/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/VERSION/MotionPathPlugin.min.js"></script>

   

1. パスに沿って要素を動かすアニメーション

まずは基本的な形となるパスに沿って要素を動かしていくパターンです、HTML側では動きの軌道となる対象のパスが必要になります、これはSVGで用意しますがインラインで記述していきます。またCSSではデザインに合わせてパスのストロークなどを指定します。ここでは塗りは不要としていますので設定していません。そして、動かす要素も合わせて用意します。もちろん画像やテキストでもOKです。注意点としては、対象となるパスは「path」要素にしておく必要があります。

// HTML
<svg viewBox="0 0 775 360" xmlns="http://www.w3.org/2000/svg">
  <path
    class="js-target-path"
    d="M.5 198C51.833 ......"
    fill="none"
  />
</svg>
<span class="js-animation-element"></span>

// CSS
svg {
  stroke: #999;
  stroke-dasharray: 12px;
  stroke-dashoffset: 12px;
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

  続いてスクリプトの方も見ていきます。これまでのプラグイン同様に、プラグイン用のオプションに合わせて指定していきます。「path」と「align」については基本的には軌道となるパスの要素を指定する形になります。「autoRotate」をtrueにしておくとパスに沿って垂直の姿勢を保ったまま動いてくれるようにになります。「repeat」はアニメーションの繰り返し回数を指定しますが、負の数を設定すると何回も繰り返しアニメーションが実行されるようになります。

gsap.to('.js-animation-element', {
  motionPath: {
    path: '.js-target-path',
    align: '.js-target-path',
    alignOrigin: [0.5, 0.5],
    autoRotate: true,
    start: 0,
    end: 1
  },
  repeat: -1,
  repeatDelay: 0,
  transformOrigin: '50% 50%',
  duration: 10,
  ease: 'power2.inOut'
});

  たったこれだけでパスに沿ったアニメーションを実装することができます。上記作成したサンプルはこちらで確認いただけます。    

2. パスに沿ったループアニメーション

続けて別のパターンも見ていきます。ここでは円形のパスにあわせてテキストをループさせるアニメーションを作成してみます。見た目だけ同じであれば、円形のパスに沿ったテキストのイメージ画像を用意して、CSSのanimationで回転させる方法などもありますが、SVGで実装できるのが大きなメリットですね。まずはHTMLを見ていきます。先程と同様に軌道となるパスとアニメーションさせる要素を用意します。今回はパスに沿ってテキストを整列させて配置していくため、テキスト要素をSVGの中で扱うようにしています。また、テキストは個別の要素として用意しておきます。テキスト要素はCSSでスタイリングさせることもできますのでデザインにあわせて調整が可能です。

// HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <path
    class="js-target-path"
    d="M150 250c-55.228 ....."
    fill="none"
  />
  <g class="text-group">
    <text class="js-animation-element">h</text>
    <text class="js-animation-element">e</text>
    <text class="js-animation-element">l</text>
    <text class="js-animation-element">l</text>
    <text class="js-animation-element">o</text>
    <text class="js-animation-element">w</text>
    <text class="js-animation-element">o</text>
    <text class="js-animation-element">r</text>
    <text class="js-animation-element">l</text>
    <text class="js-animation-element">d</text>
  </g>
</svg>

// CSS
.text-group {
  font-weight: bold;
  text-transform: uppercase;
  fill: #f0f;
  stroke: none;
  font-size: 32px;
}

  ではスクリプトも見ていきます。基本的な形は先程とあまり変わりませんが、今回は複数のテキスト要素を同時にアニメーションさせていくため、「gsap.utils.toArray」で全ての要素を取得し、それぞれの要素に対してアニメーションを設定していきます。パスに沿ってテキストの配置位置をずらしていくため、「start」と「end」の値を配列のインデックスをつかって配置場所を円状のパスに対して等間隔になるよう調整していきます。

gsap.utils.toArray('.js-animation-element').forEach((element, index) => {
  gsap.to(element, {
    motionPath: {
      path: '.js-target-path',
      align: '.js-target-path',
      alignOrigin: [0.5, 0.5],
      autoRotate: true,
      start: index * 0.09,
      end: (index * 0.09) + 1
    },
    repeat: -1,
    repeatDelay: 0,
    yoyo: false,
    transformOrigin: '50% 50%',
    duration: 10,
    ease: 'none'
  });
});

  「yoyo」のオプションをtrueにすることで、アニメーション終了後に逆再生でアニメーションをさせることもできますが、今回は同じ動きを繰り返すループアニメーションのため、falseに設定しておきます。これで円形のパスに沿ったループアニメーションができました。上記作成したサンプルはこちらで確認いただけます。   MotionPathプラグインでは各種プロパティを設定することで、細かいところまでアニメーションを調整することが可能です。以下プロパティの一部をまとめています。  

motionPath.path	要素をモーションさせる軌道となるパスを指定
motionPath.align	アニメーションさせる対象の配置させる基準を指定
motionPath.alignOrigin	アニメーションさせる要素と軌道となるパスを合わせる点を指定、それぞれx軸とy軸の座標を配列で指定
motionPath.autoRotate	パスに対して自動でアニメーション要素を回転させる、デフォルトではパスのラインに対して垂直になる
motionPath.start	パス上にあるアニメーションの開始点、0と1がそれぞれパスの起点と終点になる
motionPath.end	パス上にあるアニメーションの終了点、0と1がそれぞれパスの起点と終点になる

  また、MotionPathプラグインにはメソッドも用意されており、パスの長さや座標データ、circle要素やrect要素をpath要素に変換する処理などがあります。  

MotionPathPlugin.getLength()	対象となるパスの長さを取得、引数には対象のパス要素を入れる
MotionPathPlugin.getRawPath()	対象となるパスのデータを取得、パスの長さだけでなく、d属性の値やアンカーポイントの数などを取得できます、引数には対象のパス要素を入れる
MotionPathPlugin.convertToPath()	circle要素、rect要素、ellipse要素などをpath要素に変換します、引数には変換する要素を入れる

 

---

  今回はGSAPのMotionPathプラグインを使ってパスに沿って要素を動かすアニメーションを作成してみました。パスに沿って動かすことでより不規則でオリジナリティがある動きを表現できるのでぜひ活用していきたいですね。