【Gsap】でSVGをアニメーション

2024.06.12

はじめに

概要

Gsapを使って、SVG画像をアニメーションする方法について、このサイトで詳しく説明しています。実装例や具体的なコードを参考にして、Gsapを活用して魅力的なウェブサイトを作成しましょう。Gsapはサイト制作において非常に便利なツールです。

1実装内容
2コード
3応用編
- 3.1コード
  - 3.1.1SVG
  - 3.1.2javascript
4まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装内容

パターン1

パターン2

パターン3

コード

まずは以下のようにSVGのコードをそのままHTML内に添付する必要があります。<img src=”img.svg”>このような形では機能しませんのでご注意ください。

HTML内にSVGコードを添付

<svg id="svg1" width="133" height="236" viewBox="0 0 33 36" fill="none" xmlns="http://www.w3.org/2000/svg">

<g style="mix-blend-mode:multiply">

<circle cx="4.81753" cy="4.81759" r="4.26201" transform="rotate(-8.06069 4.81753 4.81759)" fill="#5875E3" />

</g>

<g style="mix-blend-mode:multiply">

<circle cx="8.84973" cy="8.84973" r="8.84973" transform="matrix(-0.99012 0.140222 0.140222 0.99012 24.886 15.4982)" fill="#61C4A2" />

</g>

<g style="mix-blend-mode:multiply">

<circle cx="6.19929" cy="6.19929" r="6.19929" transform="matrix(-0.99012 0.140222 0.140222 0.99012 31.2615 10.4613)" fill="#F08691" />

</g>

</svg>

<svg id="svg4" width="255" height="341" viewBox="0 0 355 441" fill="none" xmlns="http://www.w3.org/2000/svg">

<g style="mix-blend-mode:multiply">

<circle cx="75" cy="366" r="75" fill="#F3A74A" />

</g>

<g style="mix-blend-mode:multiply">

<circle cx="280" cy="192" r="75" fill="#5875E3" />

</g>

<g style="mix-blend-mode:multiply">

<circle cx="190.5" cy="224.5" r="61.5" fill="#F08691" />

</g>

<g style="mix-blend-mode:multiply">

<circle cx="266.5" cy="352.5" r="61.5" fill="#61C4A2" />

</g>

<g style="mix-blend-mode:multiply">

<circle cx="224.5" cy="61.5" r="61.5" fill="#B5E56C" />

</g>

</svg>

上記のようにすることで、SVGに対してCSSを適用することができます。IDを付与することで要素の指定がスムーズに行えます。

Gsapの導入

Gsapを使用することでSVGの要素を取得することができます。そしてtimelineメソッドや、staggerメソッドを使いアニメーションを実装しています。Gsapについてはこちらを参照ください。

Gsapで簡単に実装できること

GSAPには以下のオプションがあり、それぞれ簡単に実装できます。

順番に表示:
- アニメーションを指定した順番で表示させることができます。
- 例: 要素が一つずつ順番にフェードインする。
繰り返し表示:
- アニメーションを指定回数、または無限に繰り返すことができます。
- 例: ボタンがクリックされるたびに同じアニメーションを繰り返す。
逆再生:
- アニメーションを逆方向に再生することができます。
- 例: 要素がフェードアウトした後、逆再生でフェードインする。
ランダム表示:
- アニメーションの順番や開始タイミングをランダムに設定することができます。
- 例: 複数の要素がランダムな順番で表示される。
遅延開始:
- アニメーションの開始を遅らせることができます。
- 例: アニメーションが数秒遅れて始まる。
速度調整:
- アニメーションの速度を調整することができます。
- 例: 要素の移動速度を速くしたり、遅くしたりする。
イージング:
- アニメーションの動きに自然な加速や減速を加えることができます。
- 例: 要素が滑らかに動くように設定する。
トリガー:
- 特定のイベントをトリガーとしてアニメーションを開始することができます。
- 例: スクロール時にアニメーションが始まる。
パララックス効果:
- 要素にパララックス効果を加えることができます。
- 例: 背景が前景よりも遅く動くことで奥行きを表現する。

const circles1 = document.querySelectorAll("#svg1 circle");

const tl = gsap.timeline({
repeat: -1
}); // 永遠に繰り返す設定を追加

tl.from(

circles1, {

opacity: 0,

y: -50,

scale: 0.5, // scaleアニメーションを追加

duration: 0.8,

ease: "bounce.out",

stagger: 0.4,

},

"<"

)

.to(

circles1, {

opacity: 0,

duration: 0.6,

ease: "power2.out",

stagger: 0.2,

}

);

実装内容

このコードスニペットは、GSAP（GreenSock Animation Platform）を使ってSVG内の円（circle）要素に対してアニメーションを適用しています。以下はそのコードの説明です。

const circles1 = document.querySelectorAll("#svg1 circle");

この行は、IDがsvg1の要素内にある全ての円（circle）要素を選択し、それらをcircles1という変数に格納しています。

const tl = gsap.timeline({
  repeat: -1
}); // 永遠に繰り返す設定を追加

tlというタイムラインを作成し、repeat: -1というオプションを設定しています。これにより、タイムライン内のアニメーションが永遠に繰り返されるようになります。

tl.from(
  circles1, {
    opacity: 0,
    y: -50,
    scale: 0.5, // scaleアニメーションを追加
    duration: 0.8,
    ease: "bounce.out",
    stagger: 0.4,
  },
  "<"
)

fromメソッドを使って、circles1に含まれる全ての円要素のアニメーションを定義しています。
- opacity: 0：透明度が0から始まる（完全に透明）。
- y: -50：Y軸方向に-50ピクセルの位置から始まる（初期位置より50ピクセル上から）。
- scale: 0.5：スケールが0.5倍のサイズから始まる。
- duration: 0.8：このアニメーションが0.8秒間続く。
- ease: "bounce.out"：バウンス効果を伴うイージング。
- stagger: 0.4：各円が0.4秒ずつ遅れてアニメーションを開始する。
- "<"：このアニメーションは前のアニメーションと同時に開始する。

.to(
  circles1, {
    opacity: 0,
    duration: 0.6,
    ease: "power2.out",
    stagger: 0.2,
  }
);

toメソッドを使って、circles1に含まれる全ての円要素の次のアニメーションを定義しています。
- opacity: 0：透明度が0になる（完全に透明）。
- duration: 0.6：このアニメーションが0.6秒間続く。
- ease: "power2.out"：パワーアウト効果を伴うイージング。
- stagger: 0.2：各円が0.2秒ずつ遅れてアニメーションを開始する。

応用編

以下のようなアニメーションも可能です。

コード

SVG

<div class="black-cont">
  <svg id="svg5" width="800" height="600" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g style="mix-blend-mode:difference">
      <circle cx="105" cy="300" r="45" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="200" cy="192" r="35" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="295" cy="366" r="55" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="390" cy="192" r="75" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="485.5" cy="224.5" r="61.5" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="580.5" cy="352.5" r="61.5" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="675.5" cy="61.5" r="61.5" fill="#fff" />
    </g>
    <!-- 追加した円 -->
    <g style="mix-blend-mode:difference">
      <circle cx="150" cy="400" r="45" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="300" cy="250" r="35" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="450" cy="500" r="55" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="600" cy="150" r="75" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="750" cy="450" r="61.5" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="50" cy="500" r="61.5" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="700" cy="300" r="61.5" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="250" cy="100" r="45" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="350" cy="450" r="35" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="550" cy="400" r="55" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="650" cy="200" r="75" fill="#fff" />
    </g>
    <g style="mix-blend-mode:difference">
      <circle cx="150" cy="150" r="61.5" fill="#fff" />
    </g>
  </svg>
</div>

<g style="mix-blend-mode:difference">は、SVG（Scalable Vector Graphics）要素のグループ (<g>) に対して、CSSのmix-blend-modeプロパティを使用してブレンドモードを設定しています。

javascript

const circles = document.querySelectorAll("#svg5 circle");

// 各サークルにランダムな動きを永遠に繰り返すアニメーションを追加

circles.forEach(circle => {

gsap.to(circle, {

x: () => gsap.utils.random(-10, 10), // ランダムなx方向の移動

y: () => gsap.utils.random(-10, 10), // ランダムなy方向の移動

duration: 1, // アニメーションの継続時間

repeat: -1, // 永遠に繰り返す

yoyo: true, // 行ったり来たりする動き

ease: "power1.inOut" // スムーズな動き

});

});

このコードは、SVG内のすべての円要素に対して、x方向およびy方向にランダムな移動を行うアニメーションを設定し、そのアニメーションが永遠に繰り返されるようにします。各円は1秒ごとにランダムな位置に移動し、元の位置に戻る動きを繰り返します。これにより、視覚的に興味深い、絶え間なく動き続けるエフェクトが作り出されます。

まとめ

GsapでSVG画像をアニメーションすることができる
SVGはコードをHTMLに記述する必要がある
Gsapのオプションで柔軟なアニメーションが実装できる
簡単に複雑なアニメーションが実装できる

著者・プロフィール

Souichi_Kimura

-history-

① セキュリティ関連の業界で20年の経験を持ち、昨年からはフリーランスとして活動。

② プログラミングスクールや職業訓練校LaLaメイツに通い、Web制作の技術を探求。

③ Web活Blogを通じてWeb制作に関する情報を発信。

④ フリーランスとして、クラウドソーシングを通じてクライアント様からの制作依頼を受注。実績はこちら

⑤ お仕事の依頼につきましては、以下のリンクからメッセージいただけますと幸いです。

⑥ Web制作の初心者に伴走します。

- MENTA

Web制作Output&初心者のための徹底ガイド

注目のタグ

【Gsap】でSVGをアニメーション

実装内容

パターン1

パターン2

パターン3

コード

HTML内にSVGコードを添付

Gsapの導入

Gsapで簡単に実装できること

実装内容

応用編

コード

SVG

javascript

まとめ