Motion Vue (motion-v)

Vue 3 と Nuxt 用のアニメーションライブラリ。本番環境対応で、ハードウェアアクセラレーションされたアニメーションを最小限のバンドルサイズで実現します。

現在の安定版: motion-v 1.x - Motion (旧 Framer Motion) の Vue ポート

概要

Motion Vue アニメーションの段階的なリファレンス。現在のタスクに関連するファイルのみをロードします(ベース約200トークン、サブファイルごとに500～1500トークン)。

使用時期

Motion Vue を使用する場合:

• シンプルな宣言的アニメーション(フェード、スライド、スケール)
• ジェスチャーベースのインタラクション(ホバー、タップ、ドラッグ)
• スクロール連動アニメーション
• レイアウトアニメーションと共有要素トランジション
• スプリング物理演算アニメーション

代替案を検討する場合:

• GSAP - 複雑なタイムライン、SVG モーフィング、スクロールトリガーシーケンス
• @vueuse/motion - よりシンプルな API、機能が少ない、バンドルが小さい
• CSS animations - JS 不要のシンプルなトランジション

インストール

# Vue 3
pnpm add motion-v

# Nuxt 3
pnpm add motion-v @vueuse/nuxt

// nuxt.config.ts - Nuxt 3 セットアップ
export default defineNuxtConfig({
  modules: ['motion-v/nuxt'],
})

クイックリファレンス

作業内容	ロードするファイル
Motion コンポーネント、ジェスチャー	references/components.md
useMotionValue、useScroll	references/composables.md
アニメーション例、パターン	references/examples.md

ファイルのロード

タスクに基づいて、以下のリファレンスファイルをロードすることを検討してください:

• references/components.md - Motion コンポーネント、ジェスチャー、またはレイアウトアニメーションを使用する場合
• references/composables.md - useMotionValue、useScroll、useSpring、または animate() を使用する場合
• references/examples.md - アニメーションパターンやインスピレーションを探している場合

すべてのファイルを一度にロードしないでください。 現在のタスクに関連するものだけをロードしてください。

コアコンセプト

Motion コンポーネント

アニメーション機能を備えた任意の HTML/SVG 要素をレンダリングします:

<script setup lang="ts">
import { motion } from 'motion-v'
</script>

<template>
  <motion.div
    :initial="{ opacity: 0, y: 20 }"
    :animate="{ opacity: 1, y: 0 }"
    :exit="{ opacity: 0, y: -20 }"
    :transition="{ duration: 0.3 }"
  >
    Animated content
  </motion.div>
</template>

ジェスチャーアニメーション

<motion.button
  :whileHover="{ scale: 1.05 }"
  :whilePress="{ scale: 0.95 }"
  :transition="{ type: 'spring', stiffness: 400 }"
>
  Click me
</motion.button>

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

<motion.div
  :initial="{ opacity: 0 }"
  :whileInView="{ opacity: 1 }"
  :viewport="{ once: true, margin: '-100px' }"
>
  Appears on scroll
</motion.div>

利用可能なガイダンス

references/components.md - Motion コンポーネントバリアント、アニメーションプロップ、ジェスチャープロップ、レイアウトアニメーション、トランジション設定

references/composables.md - useMotionValue、useSpring、useTransform、useScroll、useInView、animate()

references/examples.md - 外部リソース、コンポーネントライブラリ、アニメーションパターンとインスピレーション