Framer Motion（Motion for React）のサンプル25例をその場で実行できます。フェード、スタッガー、レイアウト、共有要素、モーダル、アコーディオン、ドラッグ、スクロール進捗、ページ遷移、動きの軽減に対応。
Framer Motion（現在はMotion for Reactとして公開）は、要素をmotionコンポーネントに置き換えるだけでアニメーションできます。initial、animate、transitionの各プロパティを指定しましょう。以下の25のレシピはこのページ上で実際に動作し、それぞれコピーできるコード付きです。登場、スタッガー、ドラッグ、レイアウトと共有要素、退場アニメーション、スクロール進捗、ページ遷移、動きの軽減を扱います。
インストール
このページにあるデモはどれも、すぐ横に表示されているコードそのものが、あなたのブラウザーの中で実際に動いているものです。レシピはmotionパッケージを使っています。プロジェクトがまだframer-motionを使っている場合も、コンポーネントとプロパティは同じで、違うのはインポートパスだけです。
はい。ライブラリーの名前がMotionに変わり、React向けの部分はmotion/reactからインポートします。framer-motionパッケージも同じAPIで公開され続けているため、以前に書かれたチュートリアルも、手を加えずにそのまま利用できます。
要素はAnimatePresenceの直接の子であり、一意のキーを持ち、exitプロパティが指定されている必要があります。AnimatePresenceの親まで削除されると、アニメーションさせる対象が何も残りません。
motion要素でheightを0から"auto"へアニメーションさせ、overflowをhiddenにします。実際の高さはMotionが計測してくれます。これは通常のCSSトランジションだけでは実現できないことです。
motionコンポーネントはブラウザーのAPIを使うため、それを描画するファイルには"use client"が必要です。サーバーコンポーネントからそのクライアントコンポーネントを描画し、childrenを渡すことは可能です。
再レイアウトなしで動くトランスフォームと不透明度に絞れば問題ありません。大きなレイアウトアニメーションや、同時に動く多数の要素は負荷が高くなります。実際に中価格帯のスマートフォンで動作を確かめたうえで、LazyMotionでバンドルを削りましょう。
このページで使うプロパティとフック
initialが最初のフレーム、animateが終わりの状態です。一度だけ再生される登場の動きであれば、これ以外に必要なものは何もありません。
yでの移動はCSSのトランスフォームを使うため、移動中に要素が隣の要素を押しのけることはありません。
variantsは名前付きの状態です。親が状態を子へ渡し、staggerChildrenが子ごとに前より少しずつ遅らせます。
whileInViewは要素がビューポートに入るとアニメーションを開始します。once: trueでスクロールのたびに再生されるのを防げます。
配列はキーフレームのリストです。timesで0から1までの範囲に各フレームを配分します。
whileHoverとwhileTapは、ジェスチャーが続く間ある状態へアニメーションし、終わると自動で元に戻ります。
dragConstraintsには親要素の参照を渡せるため、アイテムがその外へドラッグされることはありません。
1軸だけでドラッグし、onDragEndでオフセットと速度を読み取って、カードを消すか元に戻すかを決めます。
Reorder.Groupが配列を状態として保持し、新しい順序を渡してくれます。各Reorder.Itemには対応する値が必要です。
xをいくつかのキーフレームで動かすと、よく見かける、あのぶるぶると揺れる動きになります。キーを変えるか、useAnimateのanimateを呼んで発火させます。
layoutを付けて、通常のCSSでサイズや位置を変えます。Motionが変化の前後を計測し、差分をトランスフォームでアニメーションします。
同じlayoutIdを持つ2つの要素は1つとして扱われます。下線が新しいタブの下に描画されると、そこへ滑らかに移動します。
Reactは要素を即座に削除します。AnimatePresenceで囲むと、退場する子は退場アニメーションが終わるまでマウントされたままになります。
背景とパネルが一緒にフェードし、パネルは同時にせり上がります。本来のダイアログのセマンティクス（role、フォーカス、Escape）は自分のコードで維持してください。
Motionはheight: "auto"へのアニメーションが可能で、これは素のCSSトランジションではできません。overflow hiddenで、開く途中にテキストがはみ出すのを防ぎます。
各トーストにlayoutを付けると、1つが消えたとき残りが滑らかに上へ詰まります。popLayoutを使うと、消えるトーストがすぐに場所を占有しなくなります。
mode="wait"にすると、古いページが退場し終えてから新しいページが登場します。キーはルートに合わせて変わる必要があります。
useScrollは0から1のscrollYProgressを返します。ウィンドウではなくスクロールするボックスを追跡するにはcontainerを渡し、その値でバーを拡大縮小します。
useTransformはあるモーション値を別の範囲に変換するため、レイヤーをスクロールとは異なる速さで動かせます。
animate()でモーション値を動かせます。useTransformで丸め、モーション値を直接描画すれば、毎フレームのReactの再描画を避けられます。
pathLengthはpath、circle、lineのいずれでも0から1まで動かせます。チェックマークや手書きの署名を描いて見せるための、いちばん手軽な方法です。
repeat: Infinityとlinearのイージングで一定速度の回転になります。あわせて、いま何を読み込んでいるのかを伝える表示用のテキスト、またはスクリーンリーダー向けのテキストを必ず添えましょう。
useAnimateはスコープ用の参照とanimate関数を返します。各呼び出しをawaitすると手順が順番に実行され、スタッガーで1つの手順を多数の要素に分散できます。
stiffness（剛性）はスプリングが引っ張る強さ、damping（減衰）は収まる速さを決めます。減衰の値が低いと、目標を行き過ぎてしばらく揺れ続けます。
MotionConfig reducedMotion="user"は、システムで動きを減らす設定をしている人に対してトランスフォームとレイアウトのアニメーションを無効にし、フェードは残します。
template.tsxはlayout.tsxと違ってナビゲーションのたびに再マウントされるため、ページを移動するたびにinitialからanimateが実行されます。motionを使うので"use client"が必要です。
mコンポーネントとLazyMotionを組み合わせると、指定した機能だけを読み込みます。domAnimationはアニメーション、variants、exit、ジェスチャーをカバーし、domMaxはドラッグとレイアウトを追加します。
JavaScriptなしの効果がよければ、こちらをお試しください：
もう一度再生
こんにちは
カード
計画
デザイン
構築
公開
このボックスを下にスクロールしてください。
セクションの内容
押してください
ドラッグできるボール
カード {n}
{card}：スワイプしてください
リセット
ロゴ
メニュー
ヒーロー
フッター
パスワード（ここではどの答えも不正解です）
サインイン
ボックスを拡大または縮小
ホーム
料金
ブログ
隠す
表示
モーダルを開く
保存しました
閉じる
何が含まれていますか？
ホスティング、無料のアドレス、エディターです。
下書き {n} を保存しました
トーストを追加
ようこそ。
このスタジオについて。
お気軽にご連絡ください。
段落 {n}。スクロールを続けると、このボックスを読み進めるにつれてバーが満ちていきます。
読み込み中
一つ目
二つ目
三つ目
再生
移動
お使いのシステムは動きの軽減を求めています：{answer}。「はい」の場合、下のボックスはフェードのみになります。
mコンポーネントで描画
無料で始める · クレジットカード不要