SVGのシェイプを一筆書きのように描くようなアニメーションをさせたい時、GSAPにはSVGのドローアニメーションに対応するプラグインの「DrawSVG」というものがありますが、有料のため条件によっては使えないこともあります。そのような場合には同じくSVGのドローアニメーションのライブラリである「vivus」をGSAPとあわせて使うことで実現させることができます。今回はviviusとGSAPを併用するパターンを例に見ていきます。   （過去の参考記事） GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃3：スクロールで固定表示 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃2：スクロール量に連動 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃1：基本編 JavaScriptのアニメーションライブラリ「GSAP」を使ってみる    

vivusの基本的な使い方

まずは必要なソースコードをインストールしていきます。npmやCDNなどが利用できますので環境に合わせて準備していきます。

// npm
$ npm install vivus

// CDN
<script src="https://cdn.jsdelivr.net/npm/vivus@0.4.6/dist/vivus.min.js"></script>

  vivusの使い方ですが、必要なスクリプトを読み込んだら対象となるSVG要素に対してID属性を設定し、その後インスタンスを作成するだけで簡単にドローアニメーションを作成することができます。第一引数にはSVG要素のID属性値を、第二引数にはオプションを設定します。注意点としては、対象要素を指定する際にはID属性の値である必要があります。class属性の値は使えませんので注意します。

<svg id="my-svg">
  <path...>
</svg>

import Vivus from 'vivus';

new Vivus('my-svg',
  {
    type: 'delayed',
    duration: 200,
    nimTimingFunction: Vivus.EASE,
    onReady: () => {
      console.log(''vivus is ready.)
    }
  }
);

  オプションはそれぞれのキーにあわせて設定していきます、いろんなオプションがありますが、一部下記にまとめてみました。詳しくは公式サイトを参考にしてみてください。  

type	パスアニメーションの種類を指定します、'delayed'、'sync'、'oneByOne'などが用意されており、それぞれのパスが同時にアニメーションしたり、順番にアニメーションが実行されるなどを選べます。
duration	アニメーションの長さを指定します。
animTimingFunction	アニメーションのイージングを指定できます、'EASE'、'EASE_IN'、'EASE_OUT'などが用意されています。
onReady	作成されたインスタンスでアニメーションが実行できる状態になった時に指定したコールバック関数を実行することができます。

  これでドローアニメーションは実装できますが、このままではロードされた直後に実行されてしまうため、スクロールに合わせてアニメーションが発火するようにしていくためにここからはGSAPと併用していきます。    

SVGのアウトラインドローアニメーション

それでは具体的にアニメーションの例を見ていきます。まずは要素のアウトラインを描画するドローアニメーションになります。vivusのドローアニメーションではSVG要素のstroke-dasharrayとstroke-dashoffsetプロパティの値を調整することで線描画のアニメーションを実現させています。ですのでアウトラインアニメーションはよく使われるケースとなります。GSAPと併用する時も基本的にはvivusの使い方は同じですね。まずはHTMLとCSSでベースとなるSVG要素を用意していきます。今回はSVG要素の塗りは無しでアウトラインだけ表示させるので、それに合わせてCSSでstrokeプロパティを設定しておきます。

<div class="js-trigger">
  <svg class="js-element" id="svg_element" ...>
    <path...></path>
  </svg>
</div>

svg path {
  fill-opacity: 0;
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

  スクリプト側では、vivusのインスタンスを作成し、アニメーションが実行されるようにしておきますが、GSAP側ではScrollTriggerプラグインを使い、トリガー要素が空くローラーに入ったタイミングでアニメーションされるようにします。

import Vivus from 'vivus';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);
const drawAnimation = new Vivus(
  'svg_element',
  {
    type: 'oneByOne',
    duration: 500,
    forceRender: false
  }
);
gsap.fromTo(
  '.js-element',
  {
    autoAlpha: 0
  },
  {
    autoAlpha: 1,
    delay: 0.1,
    duration: 0.2,
    ease: 'none',
    scrollTrigger: {
      trigger: '.js-trigger',
      start: 'top 40%',
      end: 'bottom 10%',
      markers: true,
      onEnter: () => {
        drawAnimation.stop().reset().play(0.2);
      },
      onLeave: () => {
        drawAnimation.stop().finish();
      },
      onLeaveBack: () => {
        drawAnimation.stop().finish().play(-4);
      }
    }
  }
);

  上記では、順方向のスクロールでトリガー要素が入ったらアニメーションが再生され、トリガー要素が出た場合にはアニメーションが終了状態で止まるようにしています。さらに、逆方向のスクロールでトリガー要素がスクローラーから出た時には、アニメーション再生前に戻った状態にしています。これでスクロールの状態に合わせてアニメーションをコントロールすることができますね。上記で作成したサンプルはこちらで確認できます。    

マスクを使ったSVGのドローアニメーション

続けて、もう一つのアニメーションとしてテキストを手書き風に描画していくパターンもあります。これはベースとなるSVGをマスクしているパスを対象にドローアニメーションさせることで、ベースのパスを徐々に表示させていくという仕組みになります。ですので、まずは下記のようにベースのテキストを覆い隠すようにベクターツールなどでパスを作成しておきます。   SVGが用意できたら下記のようにHTMLを作成していきます。今回はテキスト要素をマスク要素でマスクしておく必要があるので、そのような形になるようにmask属性でマスク要素を紐づけておきます。CSSではマスク用のパスに対して、strokeの色を白にして、太さはテキスト要素を覆い隠すくらいの幅にしておくのがポイントです、合わせて strokeの角や先端を丸くなるように設定しておくと自然に見えます。

<div class="js-trigger">
  <svg class="js-element" id="svg_element" ...>
    <defs>
      <mask id="mask">
        <polyline id="maskElement"...></polyline>
      </mask>
    </defs>
    <path id="textElement" mask="url(#mask)"...></path>
  </svg>
</div>

svg path#maskElement {
  fill: none;
  stroke: #fff;
  stroke-width: 30px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg path#textElement {
  fill: #000;
}

  スクリプト側では先ほどと同じようにGSAPの中でvivusのアニメーションを使っていきます。vivusにはいろんなメソッドも用意されており、アニメーションの実行や停止、逆再生などをコントロールすることができますので、必要に合わせて調整しておきます。

const drawAnimation = new Vivus(
  'svg_element',
  {
    type: 'delayed',
    duration: 100,
    forceRender: false
  }
);
gsap.fromTo(
  '.js-element',
  {
    autoAlpha: 0
  },
  {
    autoAlpha: 1,
    delay: 0.1,
    duration: 0.2,
    ease: 'none',
    scrollTrigger: {
      trigger: '.js-trigger',
      start: 'top 40%',
      end: 'bottom 10%',
      markers: true,
      onEnter: () => {
        drawAnimation.stop().reset().play(0.2);
      },
      onLeave: () => {
        drawAnimation.stop().finish();
      },
      onLeaveBack: () => {
        drawAnimation.stop().finish().play(-1);
      }
    }
  }
);

  上記のサンプルはこちらに用意していますのでご参考に。また、下記にはvivusで使えるメソッドを一部まとめています。  

play(speed, callback)	アニメーションを再生します、第一引数にはアニメーションのスピードを指定し、負の値を入れると逆再生になります。数が大きくなるとスピードが上がります。第二引数にはアニメーション終了後のコールバック関数を指定することができます。
stop()	アニメーションを停止します。
reset()	SVG要素を未描画となるアニメーション前の状態にします。
finish()	SVG要素を描画後となるアニメーション終了後の状態にします。

 

---

  今回はGSAPとvivusを組み合わせて、スクロールに合わせてSVGのドローアニメーションを使う例を見ていきました。GSAPには有料のDrawSVGというプラグインもありますが、無料の範囲内ですと今回のような方法も役立つと思いますので是非参考にしてみてください。