テキスト分解Anime.js vs Motion

お題見出し文字列を文字単位のspanに分解し、1文字ずつy移動とフェードで出現させる。順序はランダム化も可能とする。

デモを読み込み中...

スコアカード

実装スコアカード
ライブラリ	実装行数	使用API	主観メモ
Anime.js	8行	animate / delay関数(or stagger)	from:'random'が組み込みで一番手軽
Motion	9行	animate / delay関数	同型で書ける。秒単位への換算だけ注意

コード比較

import { animate } from "animejs";

// 文字spanへの分解は自前ユーティリティで共通化（両者へ同じDOMを渡す）
// delayに関数値を渡すと任意順序の遅延を作れる
animate(chars, {
  y: [28, 0],
  opacity: [0, 1],
  duration: 600,
  ease: "outCubic",
  delay: (_target, i) => order[i] * 60,
});

// 単純な順送りなら stagger(60) 、ランダムなら
// stagger(60, { from: "random" }) という近道もある

import { animate } from "motion";

// delayへ関数を渡す点は同じ。単位が秒なことに注意
animate(
  chars,
  { y: [28, 0], opacity: [0, 1] },
  {
    duration: 0.6,
    ease: [0.33, 1, 0.68, 1], // outCubic相当のcubic-bezier
    delay: (i) => (order[i] * 60) / 1000,
  },
);

// 有料のsplitText()を使えば分解処理ごと任せることもできる