Motion アニメーションガイドライン

Motion (motion.dev)、JavaScript、TypeScript、Webアニメーションパフォーマンスの専門家です。アニメーションを作成する際は、以下のガイドラインに従ってください。

コア原則

Motion について

• Motion は Framer Motion の作成者による JavaScript アニメーションライブラリです
• バニラ JavaScript/TypeScript プロジェクトでは motion を使用してください
• React プロジェクトでは motion/react を使用してください (framer-motion スキルを参照)
• 高パフォーマンスと最小限のバンドルサイズを想定して設計されています

インストール

npm install motion

基本的なインポート

import { animate, scroll, inView, timeline } from "motion";

基本的なアニメーション

シンプルなアニメーション

import { animate } from "motion";

// 単一要素をアニメーション
animate(".element", { x: 100, opacity: 1 }, { duration: 0.5 });

// オプション付きアニメーション
animate(
  ".element",
  { transform: "translateX(100px)" },
  {
    duration: 0.8,
    easing: "ease-out"
  }
);

キーフレーム

animate(
  ".element",
  {
    x: [0, 100, 50],      // キーフレーム値
    opacity: [0, 1, 0.5]
  },
  { duration: 1 }
);

パフォーマンス最適化

トランスフォーム プロパティのアニメーション

// 最高のパフォーマンス - GPU アクセラレーション
animate(".element", {
  x: 100,           // translateX
  y: 50,            // translateY
  scale: 1.2,       // scale
  rotate: 45,       // rotate
  opacity: 0.5      // opacity
});

// 可能な限り回避 - レイアウト再計算を引き起こす
animate(".element", {
  width: 200,       // レイアウト再計算を引き起こす
  height: 150,      // レイアウト再計算を引き起こす
  top: 50,          // レイアウト再計算を引き起こす
  left: 100         // レイアウト再計算を引き起こす
});

will-change を使用

// トランスフォーム アニメーション用に will-change を追加
const element = document.querySelector(".element");
element.style.willChange = "transform";

animate(element, { x: 100 }, {
  onComplete: () => {
    element.style.willChange = "auto"; // アニメーション後に削除
  }
});

ハードウェア アクセラレーション

Motion は可能な限り自動的にハードウェア アクセラレーション対応プロパティを使用します。最高のパフォーマンスのために:

1. left や top より x、y を優先
2. width、height より scale を優先
3. フェード効果には opacity を使用
4. transform: rotate() より rotate を使用

タイムラインアニメーション

タイムラインの作成

import { timeline } from "motion";

const sequence = [
  [".header", { y: ["-100%", 0], opacity: [0, 1] }],
  [".content", { y: [50, 0], opacity: [0, 1] }, { at: "-0.3" }],
  [".footer", { y: [50, 0], opacity: [0, 1] }, { at: "-0.3" }]
];

const controls = timeline(sequence, {
  duration: 0.8,
  defaultOptions: { easing: "ease-out" }
});

タイムラインコントロール

const controls = timeline(sequence);

controls.play();
controls.pause();
controls.reverse();
controls.stop();
controls.finish();

// 特定の時刻にシーク
controls.currentTime = 0.5;

スクロールアニメーション

基本的なスクロールアニメーション

import { scroll, animate } from "motion";

scroll(
  animate(".progress-bar", { scaleX: [0, 1] }),
  { target: document.querySelector("article") }
);

スクロールリンク アニメーション

scroll(({ y }) => {
  // y.progress は 0 から 1
  animate(".element", {
    opacity: y.progress,
    y: y.progress * 100
  }, { duration: 0 });
});

コンテナ付きスクロール

scroll(
  animate(".parallax", { y: [0, -100] }),
  {
    target: document.querySelector(".section"),
    offset: ["start end", "end start"]
  }
);

ビュー内アニメーション

可視性でトリガー

import { inView, animate } from "motion";

inView(".card", (info) => {
  animate(info.target, { opacity: 1, y: 0 }, { duration: 0.5 });

  // クリーンアップ関数を返す
  return () => {
    animate(info.target, { opacity: 0, y: 20 }, { duration: 0.2 });
  };
});

オプション付き

inView(
  ".element",
  (info) => {
    animate(info.target, { scale: [0.8, 1], opacity: [0, 1] });
  },
  {
    margin: "-100px",  // ビューポート進入前 100px でトリガー
    amount: 0.5        // 50% 表示時にトリガー
  }
);

スタッガーアニメーション

複数要素のスタッガー

import { stagger, animate } from "motion";

animate(
  ".list-item",
  { opacity: [0, 1], y: [20, 0] },
  { delay: stagger(0.1) }
);

中心からのスタッガー

animate(
  ".grid-item",
  { scale: [0, 1] },
  { delay: stagger(0.05, { from: "center" }) }
);

イージング付きスタッガー

animate(
  ".item",
  { x: ["-100%", 0] },
  {
    delay: stagger(0.1, {
      easing: "ease-out",
      start: 0.2
    })
  }
);

スプリングアニメーション

自然な動きにはスプリングを使用

animate(
  ".element",
  { scale: 1.2 },
  {
    easing: "spring",
    // またはカスタムスプリング設定
    easing: [0.34, 1.56, 0.64, 1] // カスタムベジェ曲線
  }
);

スプリングオプション

animate(".element", { x: 100 }, {
  type: "spring",
  stiffness: 300,
  damping: 30
});

イージング関数

組み込みイージング

// 一般的なイージング値
animate(".element", { x: 100 }, { easing: "ease" });
animate(".element", { x: 100 }, { easing: "ease-in" });
animate(".element", { x: 100 }, { easing: "ease-out" });
animate(".element", { x: 100 }, { easing: "ease-in-out" });
animate(".element", { x: 100 }, { easing: "linear" });

// 3次ベジェ曲線
animate(".element", { x: 100 }, {
  easing: [0.25, 0.1, 0.25, 1]
});

アニメーションコントロール

再生制御

const controls = animate(".element", { x: 100 }, { duration: 1 });

// コントロールメソッド
controls.play();
controls.pause();
controls.stop();
controls.finish();
controls.reverse();

// 時刻の取得/設定
controls.currentTime = 0.5;
console.log(controls.duration);

// アニメーションをキャンセル
controls.cancel();

アニメーションイベント

const controls = animate(
  ".element",
  { x: 100 },
  {
    duration: 1,
    onComplete: () => console.log("完了!")
  }
);

// Promise ベース
controls.finished.then(() => {
  console.log("アニメーション完了");
});

アクセシビリティ

モーション削減を尊重

const prefersReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

animate(
  ".element",
  { x: 100, opacity: 1 },
  {
    duration: prefersReducedMotion ? 0 : 0.5,
    easing: prefersReducedMotion ? "linear" : "ease-out"
  }
);

アクセシブルなラッパーを作成

function safeAnimate(element, keyframes, options = {}) {
  const reducedMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

  return animate(element, keyframes, {
    ...options,
    duration: reducedMotion ? 0 : (options.duration ?? 0.3)
  });
}

フレームワークとの統合

バニラ JavaScript

document.addEventListener("DOMContentLoaded", () => {
  animate(".hero", { opacity: [0, 1], y: [30, 0] });
});

イベントリスナー付き

const button = document.querySelector(".button");

button.addEventListener("mouseenter", () => {
  animate(button, { scale: 1.05 }, { duration: 0.2 });
});

button.addEventListener("mouseleave", () => {
  animate(button, { scale: 1 }, { duration: 0.2 });
});

クリーンアップ

アニメーションのキャンセル

const controls = animate(".element", { x: 100 });

// その後、キャンセル
controls.cancel();

クリーンアップパターン

class AnimatedComponent {
  constructor(element) {
    this.element = element;
    this.animations = [];
  }

  animate(keyframes, options) {
    const controls = animate(this.element, keyframes, options);
    this.animations.push(controls);
    return controls;
  }

  destroy() {
    this.animations.forEach(anim => anim.cancel());
    this.animations = [];
  }
}

ベストプラクティス概要

1. 最高のパフォーマンスのためにトランスフォーム プロパティ (x, y, scale, rotate) を使用
2. 複雑なアニメーション前に will-change を追加、後で削除
3. シーケンスアニメーションにはタイムラインを使用
4. スクロールリンク効果には scroll() を使用
5. ビューポートトリガーアニメーションには inView() を使用
6. 複数要素のアニメーションには stagger() を使用
7. インタラクティブ/ジェスチャーアニメーションにはスプリングを優先
8. 常にモーション削減設定を尊重
9. 不要なアニメーションはキャンセル
10. 実際のデバイスでパフォーマンスをテスト