svg-scroll-draw

svg-scroll-drawはスクロールに応じてSVGパスやその他の要素をアニメーション化できる非依存の軽量ライブラリです。

この手のライブラリでは定番のGSAPのDrawSVGや、ReactアプリならFramer Motionが良く用いられますが、svg-scroll-drawは概ね同等の機能を持ちながら、ファイルサイズはこれらの1/10以下と非常に軽量なものとなっています。

スクロールに応じて任意の要素に任意のアニメーションエフェクトで動かす事はもちろん、SVGパスを使ったインタラクティブな描画が可能で使い方もシンプルな形で制御可能です。

import { ScrollDraw } from 'svg-scroll-draw/react';

export default function Hero() {
  return (
    <ScrollDraw
  easing="spring"
  speed={1.5}
>
      <svg>...</svg>
    </ScrollDraw>
  );
}

上記例はreactですがVueでもSvelteでもAngularでも、もちろんバニラでも利用できます。

CDNも用意されています。

<script src="https://unpkg.com/svg-scroll-draw/dist/cdn/svg-scroll-draw.global.js"></script>

オプションも多数用意されており、シンプルなアニメーションから高度なものまで実装する事が出来ます。

汎用性が高くて人気なGSAP DrawSVGは商用利用する場合は有償ライセンスが必要になりますし、Framer Motionは言わずもがなReact用となっています。その他の選択はとても少なかったので、完全に同等の性能ではないものの、svg-scroll-drawのようなライブラリを待っていた方も少なく無いかもしれませんね。詳細は以下よりご確認下さい。ライセンスはMIT。

svg-scroll-drawGithub