RevealFillアニメーションを実装｜SVGアニメーションを順番に適用する方法

はじめに

SVGアニメーションは、Webデザインに動きを加えるための強力な手法です。今回は、SVGのパスを順番に塗りつぶす RevealFill アニメーションを実装する方法を紹介します。

このアニメーションでは、 Intersection Observer API を使用し、SVGが画面内に入ったときに順番に塗りが適用されるようにします。

RevealFillアニメーションとは？

RevealFillは、SVGの各パーツが順番に塗りつぶされるアニメーションです。この手法を使うことで、ロゴやアイコンをより魅力的に表示できます。

今回のアニメーションは、 SVG Artista を使って作成しました。

See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.

実装手順

1. SVGの準備

SVG Artista で作成したアニメーション付きの SVG を準備します。SVG には各パーツごとにクラスが付与され、fill のトランジションが適用されます。

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1448 1447" preserveAspectRatio="xMidYMid meet">
  <g>
    <path class="svg-elem-1" d="M6995 14464 c-169 -7..."></path>
    <path class="svg-elem-2" d="M6910 12699 c-964 -59..."></path>
    <!-- 他のパス -->
  </g>
</svg>

このSVGの fill プロパティをアニメーションで適用するように設定します。

2. CSSの設定

CSSを使用して、SVGが .active クラスを持ったときに塗りが適用されるようにします。

svg .svg-elem-1, svg .svg-elem-2 {
  fill: transparent;
  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  fill: #000;
}

svg.active .svg-elem-2 {
  fill: #000;
}

3. JavaScriptで画面内に入ったら .active を追加

JavaScript で Intersection Observer API を使用し、SVGが画面内に入ったときに .active クラスを追加します。

document.addEventListener("DOMContentLoaded", function () {
  const svgElement = document.querySelector("svg");

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        svgElement.classList.add("active");
        observer.unobserve(svgElement); // 監視を停止
      }
    });
  }, { threshold: 0.2 });

  if (svgElement) {
    observer.observe(svgElement);
  }
});

4. SVGを中央に配置し、幅を50%に設定

画面中央に配置し、幅を50%にするCSSを追加します。

svg {
  width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
}

まとめ

• SVG Artista でアニメーション付きの SVG を作成
• CSS で fill のトランジションを設定
• JavaScript で Intersection Observer を使って .active クラスを追加
• CSSで中央配置 & 幅50% に調整

この方法を使えば、シンプルで視覚的に魅力的なSVGアニメーションを実装できます！

ぜひSVGアニメーションを試してみてください！ 🚀