GSAPでsvgのpathをアニメーションさせる方法について

こんにちわ。nap5です。

GSAPでsvgのpathをアニメーションさせる方法について紹介したいと思います。

このフォーラムでも紹介されています。

Animate SVG path attributes

前回のflubberライブラリを使った内容を流用しつつ、デモコードを用意しました。

デモサイトです。

Hello React!

デモコードです。

Glitch Code Editor ･ﾟ✧

コードも公開しているので、細かいのはそちらを見ていただくことにして、ポイントとなる点を抜粋します。

attrでd属性を変化させれば、達成できます。それ以外のロジックは前回のflubberライブラリを使った内容とほぼ同じです。

useEffect(() => {
    const pathList = Object.entries(paths).map((item) => {
      return item[1];
    });
    const pairs = d3.pairs(pathList);
    const pathDom = pathDomRef.current;
    tl.fromTo(
      pathDom,
      {
        attr: {d: pairs[0][0]},
      },
      {
        attr: {d: pairs[0][1]},
        duration: 1.4,
        ease: Power4.easeOut,
      }
    )
      .fromTo(
        pathDom,
        {
          attr: {d: pairs[1][0]},
        },
        {
          attr: {d: pairs[1][1]},
          duration: 1.2,
          ease: Power3.easeOut,
        }
      )
      .fromTo(
        pathDom,
        {
          attr: {d: pairs[2][0]},
        },
        {
          attr: {d: pairs[2][1]},
          duration: 0.8,
          ease: Power2.easeOut,
        }
      );

    tl.play();
  }, []);

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

FaunaDBを使用したRSSキュレーションミニシステムの構築

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。