OSS探訪ページ内ナビ
概要
Motionは、React、JavaScript、Vue向けのWeb animation libraryです。JavaScriptの柔軟性とnative browser APIを組み合わせ、gesture、spring、layout transition、scroll-linked effect、timelineなどを提供します。Reactでは旧Framer Motion系のAPIをmotion/reactから利用できます。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
主な特徴
React・JavaScript・Vueで共通のanimation ecosystemを使う
Reactではmotion/react、JavaScriptではmotion、Vueではmotion-vを使い、projectのframeworkに合わせたAPIからanimationを組み込めます。
gesture・spring・layout・scroll・timelineを組み合わせる
READMEはgesture、spring、layout transition、scroll-linked effect、timelineを主要機能として挙げ、JavaScriptとnative browser APIを組み合わせるhybrid engineを特徴としています。
出典：[2]
向いている用途
interactionに連動したUI animationをcomponentと近い場所で管理したい場合に向く
hoverやdrag、page transition、layout change、scroll連動などをReact componentやJavaScript codeと近い場所で定義したいWeb UIに向きます。
出典：[2]
導入前の確認
Framer Motionからの名称・import path変更を確認する
READMEはFramer MotionがMotionへ移行したことを明記し、Reactではframer-motionではなくmotion/reactからのimportを案内しています。既存projectではpackageとimport pathを混在させないようにします。
出典：[2]
参考にした公式資料
- [1]motiondivision/motion repository(2026-09-30)
- [2]Motion README(2026-09-30)
- [3]motion 13.4.6 package metadata(2026-09-30)
- [4]Motion MIT license(2026-09-30)
編集部からの補足
READMEではFramer MotionはMotionへ名称変更され、Reactではmotion/reactからimportする形が案内されています。motion 13.4.6はReact/React DOM 18または19をoptional peer dependencyとして扱います。core repositoryはMITですが、Motion+のpremium contentは別枠です。
3ステップで試す
- 1
Motion 13.4.6を追加
current package versionを固定してReact projectへ追加します。
npm install motion@13.4.6 - 2
React向けmotion componentを読み込む
READMEの案内どおり、旧framer-motionではなくmotion/reactから読み込みます。
import { motion } from "motion/react"; - 3
最小animationを表示
位置animationから動作確認し、gesture、spring、layout、scrollへ段階的に広げます。
<motion.div animate={{ x: 100 }} />
成長
成長の推移 · 直近30日
33,775 Stars
推移データを蓄積中です。
Built with
カテゴリとタグ
GitHubデータ
GitHubのデータGitHubの詳細データを見る
GitHub Topics
- animation
- animation-js
- motion
- react
- reactanimations
- spring
- Stars
- 33,775
- Forks
- 1,379
- Watchers
- 124
- Open Issues
- 111
- 所有者種別
- Organization
- 主要言語
- TypeScript
- ライセンス
- MIT
- リポジトリ最終更新
- 2026/09/30
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- React Native126,760 Stars
共通タグ 3件 · 共通カテゴリ 1件
React componentをnative UIへ描画するmobile framework。0.87.1とframework-first導線を整理
C++ - Tailwind CSS97,750 Stars
共通タグ 3件 · 同じ言語
ユーティリティクラスをHTMLやコンポーネントで組み合わせ、必要なCSSをビルド時に生成する
TypeScript - SWR32,495 Stars
共通タグ 3件 · 同じ言語
Reactのリモートデータ取得をキャッシュし、再検証と重複排除までHookで管理する
TypeScript - Lucide24,797 Stars
共通タグ 3件 · 同じ言語
1600超のSVGアイコンをReact・Vueなどから必要な分だけ組み込む
TypeScript - React250,838 Stars
共通タグ 3件
コンポーネントを組み合わせてWeb・ネイティブUIを構築するJavaScriptライブラリ
JavaScript - Frontman707 Stars
共通タグ 3件
browserで選んだUIをlive DOM・CSS・source mapからsourceへ辿り、AIで直接修正する
ReScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。