タイムラインAnime.js vs Motion

お題見出し・画像枠・ボタンの3要素を、後続が指定秒数だけ重なりながら順次登場させ、スライダーで任意位置へシークできるようにする。

デモを読み込み中...

スコアカード

実装スコアカード
ライブラリ	実装行数	使用API	主観メモ
Anime.js	11行	createTimeline / add / seek	タイムライン機能は本家。ラベルや入れ子も可能
Motion	9行	animate(シーケンス配列) / time	データとして書けるのが小気味よい

コード比較

import { createTimeline } from "animejs";

// タイムラインオブジェクトに.add()で積む。
// 第3引数'-=200'で「前の区間の終わり200ms前」から開始
const tl = createTimeline({
  autoplay: false,
  defaults: { ease: "outQuad", duration: 600 },
});

tl.add(heading, { y: [-24, 0], opacity: [0, 1] })
  .add(frame, { scale: [0.85, 1], rotate: [-4, 0], opacity: [0, 1] }, "-=200")
  .add(button, { y: [24, 0], opacity: [0, 1] }, "-=200");

tl.restart();            // 再生
tl.seek(tl.duration / 2); // シーク（ミリ秒指定）

import { animate } from "motion";

// 配列そのものがシーケンス定義。
// atオプション'-0.2'で「前の区間の終わり0.2s前」から開始
const controls = animate([
  [heading, { y: [-24, 0], opacity: [0, 1] }, { duration: 0.6 }],
  [frame, { scale: [0.85, 1], rotate: [-4, 0], opacity: [0, 1] }, { at: "-0.2" }],
  [button, { y: [24, 0], opacity: [0, 1] }, { at: "-0.2" }],
]);

controls.play();                        // 再生
controls.time = controls.duration / 2;  // シーク（秒指定）