スタガーAnime.js vs Motion

お題8x5のドットグリッドをscale 0から1へ、指定した起点から遅延が波紋状に伝播する形で出現させる。

デモを読み込み中...

スコアカード

実装スコアカード
ライブラリ	実装行数	使用API	主観メモ
Anime.js	7行	animate / stagger(grid)	grid stagger一発。お題そのものが得意分野
Motion	16行	animate / delay関数(自前計算)	距離計算を書けば同じ動きは再現できる

コード比較

import { animate, stagger } from "animejs";

// grid指定のstaggerが組み込みなので、中心起点の波紋伝播を1行で書ける
const animation = animate(".dot", {
  scale: [0, 1],
  delay: stagger(40, { grid: [8, 5], from: "center" }),
  duration: 500,
  ease: "outQuad",
});

// 後始末: インスタンスをrevertすると初期DOMへ戻る
animation.revert();

import { animate } from "motion";

// Motionのstagger()はインデックス基準のみ。
// グリッド中心からの距離ベース遅延は自前で計算する必要がある
const cols = 8;
const rows = 5;
const delays = dots.map((_, i) => {
  const col = i % cols;
  const row = Math.floor(i / cols);
  const dist = Math.hypot(col - (cols - 1) / 2, row - (rows - 1) / 2);
  return (dist * 40) / 1000; // Motionは秒単位
});

const controls = animate(
  dots,
  { scale: [0, 1] },
  { duration: 0.5, ease: "easeOut", delay: (i) => delays[i] },
);

// 後始末: cancelで初期スタイルへ戻る
controls.cancel();