motiondivision/motion

これは何？

主な機能

• 01宣言的なReactコンポーネントと、プレーンなJavaScriptのanimate関数。
• 02スプリング物理、ジェスチャー、レイアウト遷移。
• 03スクロール連動エフェクトとタイムライン。
• 04motion-vパッケージによるVueサポート。
• 05TypeScriptの型定義とツリーシェイキング可能なビルド。

ユースケース

• Reactコンポーネントのインターフェースに、登場・退出・ホバー時のアニメーションを追加する。
• レイアウト内で位置やサイズが変わる要素をアニメーションさせる。
• マーケティングページやランディングページに、スクロール駆動のエフェクトを実装する。
• 低レベルのアニメーションコードを書かずに、Vueアプリケーションへ動きを加える。

クイックスタート

1. 1

   Motion for React または JavaScript をインストールする

   npm install motion
2. 2

   Motion for Vue をインストールする

   npm install motion-v
3. 3

   React コンポーネントをインポートして使用する

使う前に知っておきたいこと

• !Framer Motion は Motion に名称変更されたため、古い framer-motion のインポートを motion/react に更新する必要があります。

トピック

よくある質問

motion とは？

JavaScript、React、Vue向けのオープンソースアニメーションライブラリ。スプリング、ジェスチャー、レイアウト遷移、スクロール連動エフェクトを提供します。 MotionはJavaScript向けのアニメーションライブラリで、ReactとVue専用のパッケージも用意されています。React向けパッケージはmotion/reactからインポートでき、コアのJavaScriptパッケージでは、セレクターまたは要素と目標値のセットを受け取るanimate関数を利用できます。

motion は無料で使えますか？ライセンスは？

motion は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

motion は今もメンテナンスされていますか？

活発にメンテナンス中。motion の最終コミットは 2026年11月7日 です。

motion は何に使えますか？

Reactコンポーネントのインターフェースに、登場・退出・ホバー時のアニメーションを追加する。 レイアウト内で位置やサイズが変わる要素をアニメーションさせる。 マーケティングページやランディングページに、スクロール駆動のエフェクトを実装する。 低レベルのアニメーションコードを書かずに、Vueアプリケーションへ動きを加える。

motion のインストール方法は？

Motion for React または JavaScript をインストールする: npm install motion Motion for Vue をインストールする: npm install motion-v React コンポーネントをインポートして使用する

motion はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/motiondivision/motion