アニメーションライブラリ Motion（旧Framer Motion）でタイムラインに基づく アニメーションを実装するには
1.5K Views
February 01, 25
スライド概要
BuriKaigi2025
2025年02月01日(土)
Webフロントエンドエンジニア
関連スライド
各ページのテキスト
【BuriKaigi 2025】 アニメーションライブラリ Motion（旧Framer Motion）で タイムラインに基づく アニメーションを実装するには Github: junseinagao / X: @junpai_code
自己紹介 長尾准誠 (ながおじゅんせい) KODANSHAtech合同会社 所属 Webエンジニア 1997年2月生まれ (27歳) ・Next.jsを使ったモダンフロントエンドの開発が得意です。 ・大学卒業後、フリーランスを2~3年間やったのち会社員になりました。 ・趣味はTesla 🚘買ったり、スノボ🏂行ったり、チューバ🎺吹いたりしてます。 ・BuriKaigi 2024 に参加したのがきっかけで現職に転職しました
本日の問い 『Reactで クリエイティブ（アニメーションモリモリ） なWebサイトを作るときどうしてる？』
クリエイティブ系？のアニメーション実装例
クリエイティブ系？のアニメーション実装例
クリエイティブ系？のアニメーション実装例
一昔前（jQuery最盛期な時代）は、 、 、 GSAP（GreenSock Animation Platform ）が商用LPのアニメー ションライブラリでは大定番だった（はず？） GSAPの人気のヒミツは、Timeline API という アニメーションの順序を簡単に管理できる仕組みがあったこと 引用：『GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編）』 https://ics.media/entry/220822/
GSAPのTimeline APIのイメージ
GSAPのTimeline APIのイメージ 第1引数 指定したコンテナ内の要素を セレクタで指定 第2,3引数 keyframeのようにどのように アニメーションするかを指定 第4引数 いつのタイミングからスタート するか指定
今はMotion（Framer Motion）が人気 しかし、motionはGSAPのような時系列に基づいてアニメーシ ョンの発火を指示するというAPIの形をしていない Reactにあわせて、宣言的に記述しやすい実装方法になっている 引用：『Motion - A modern animation library for JavaScript and React』 https://motion.dev/
motionのコードのイメージ JSXのプロパティとして、アニメー ションを定義する → よりReactらしく宣言的に記述 ができる 発火のタイミングはレンダリング開 始からのduration（期間）とdelay （開始遅延）でコントロールする
「良さそう」 （表現力の柔軟性と開発体験が人気のカギ？）
Q. 『 はたして、クリエイティブなLPを マークアップするときにMotionを 採用しても大丈夫なのだろうか...? 』 （GSAPのtimelineを使えば大概の要件には対応できたけど・・・）
A. 『大丈夫です！Motionを使ってGSAPで 実現していたことを問題なく実装できます』 →→ 実行順序に関するmotionを使った実装例を３つ紹介します
motionでアニメーション実行順序を制御する実装例１ useAnimate() を使う
useAnimate()のコードのイメージ ほぼ、useGSAPと同じように実行順序 に沿って命令的に実行できる。 （async awaitで遅延するのも可） GSAPと比べて、アニメーションを 付与するDOMのコンテナにrefを渡 すところも同じ
useAnimate() を使う 記述方法がuseGSAP()とスゴい似てる けど、motionで実際に実装するとあまり使わない （React上でDOMの指定にセレクターを用いるのが負担に感じる）
Motionでアニメーション実行順序を制御する実装例２ delayプロパティを構造化して使う
単純にdelayプロパティを構造化して使う
単純にdelayプロパティを構造化して使う variant という文字列にアニメーションをまとめる機能も motionは持ってるけど構造化するだけで充分見通しが良くなる アニメーションの終わりから計算する感覚を掴めば、 durationとdelayでもtimelineとほぼ同じように使いこなせる
motionでアニメーション実行順序を制御する実装例３ シーン切り替え系はAnimatePresenceを使う
シーン切り替え系はAnimatePresenceを使う
シーン切り替え系はAnimatePresenceを使う exit（要素が消えるときに発火する） アニメーションを定義できる
シーン切り替え系はAnimatePresenceを使う 一番最後に動く要素のonAnimationComplete で 「もろもろのアニメーションが終わったら...」を発火させる
まとめ 『Motionを信じて採用しよう！』