SVG線画Anime.js vs Motion

お題一筆書き風のSVGパスをストロークが伸びる形で描画し、描き終わりに塗りをフェードインさせる。

デモを読み込み中...

スコアカード

実装スコアカード
ライブラリ	実装行数	使用API	主観メモ
Anime.js	11行	createTimeline / svg.createDrawable / stagger	SVG線画専用ユーティリティの安心感がある
Motion	10行	animate / pathLength / stagger	行数は同等だが複数アニメの同期管理は自前

コード比較

import { createTimeline, stagger, svg } from "animejs";

// createDrawable()がstroke-dashの下準備を肩代わりする。
// draw属性に「可視区間」を指定するだけで線が伸びる
const drawables = svg.createDrawable(".draw-path");

const tl = createTimeline({ defaults: { ease: "inOutQuad" } });
tl.add(drawables, {
  draw: ["0 0", "0 1"], // 逆方向は ["1 1", "0 1"]
  duration: 2000,
  delay: stagger(200),
});
tl.add(".fill-shape", { opacity: [0, 0.25], duration: 600 }, "-=400");

import { animate, stagger } from "motion";

// pathLength / pathOffset キーフレームを直接補間する。
// dash変換はMotionが内部で処理してくれる
const draw = animate(
  paths,
  { pathLength: [0, 1] }, // 逆方向は pathOffset: [1, 0] を併用
  { duration: 2, ease: "easeInOut", delay: stagger(0.2) },
);

// 塗りのフェードは別のanimate呼び出しで遅延指定
animate(fillShape, { opacity: [0, 0.25] }, { duration: 0.6, delay: 1.8 });