---
title: アニメーションライブラリ Motion（旧Framer Motion）でタイムラインに基づく アニメーションを実装するには
tags: 
author: [Junsei Nagao](https://www.docswell.com/user/junseinagao)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/K74VGK82J1.jpg?width=480
description: BuriKaigi2025 2025年02月01日(土)
published: February 01, 25
canonical: https://www.docswell.com/s/junseinagao/KJ46L3-2025-02-01-burikaigi2025-motion
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/K74VGK82J1.jpg)

【BuriKaigi 2025】
アニメーションライブラリ
Motion（旧Framer Motion）で
タイムラインに基づく
アニメーションを実装するには
Github: junseinagao / X: @junpai_code


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LJ13DX2K7G.jpg)

自己紹介
長尾准誠 (ながおじゅんせい)
KODANSHAtech合同会社 所属
Webエンジニア
1997年2月生まれ (27歳)
・Next.jsを使ったモダンフロントエンドの開発が得意です。
・大学卒業後、フリーランスを2~3年間やったのち会社員になりました。
・趣味はTesla
🚘買ったり、スノボ🏂行ったり、チューバ🎺吹いたりしてます。
・BuriKaigi 2024 に参加したのがきっかけで現職に転職しました


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GJWPYNRP72.jpg)

本日の問い
『Reactで
クリエイティブ（アニメーションモリモリ）
なWebサイトを作るときどうしてる？』


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4EZKX3R6E3.jpg)

クリエイティブ系？のアニメーション実装例


# Page. 5

![Page Image](https://bcdn.docswell.com/page/Y76Q4XRL7V.jpg)

クリエイティブ系？のアニメーション実装例


# Page. 6

![Page Image](https://bcdn.docswell.com/page/G75RQX8ME4.jpg)

クリエイティブ系？のアニメーション実装例


# Page. 7

![Page Image](https://bcdn.docswell.com/page/9J2DPXKRJR.jpg)

一昔前（jQuery最盛期な時代）は、
、
、
GSAP（GreenSock Animation Platform ）が商用LPのアニメー
ションライブラリでは大定番だった（はず？）
GSAPの人気のヒミツは、Timeline API という
アニメーションの順序を簡単に管理できる仕組みがあったこと
引用：『GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編）』
https://ics.media/entry/220822/


# Page. 8

![Page Image](https://bcdn.docswell.com/page/DEY258N5EM.jpg)

GSAPのTimeline APIのイメージ


# Page. 9

![Page Image](https://bcdn.docswell.com/page/VJN8NQX478.jpg)

GSAPのTimeline APIのイメージ
第1引数
指定したコンテナ内の要素を
セレクタで指定
第2,3引数
keyframeのようにどのように
アニメーションするかを指定
第4引数
いつのタイミングからスタート
するか指定


# Page. 10

![Page Image](https://bcdn.docswell.com/page/YE9KRD84E3.jpg)

今はMotion（Framer Motion）が人気
しかし、motionはGSAPのような時系列に基づいてアニメーシ
ョンの発火を指示するというAPIの形をしていない
Reactにあわせて、宣言的に記述しやすい実装方法になっている
引用：『Motion - A modern animation library for JavaScript and React』
https://motion.dev/


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GE8RW38VJD.jpg)

motionのコードのイメージ
JSXのプロパティとして、アニメー
ションを定義する
→ よりReactらしく宣言的に記述
ができる
発火のタイミングはレンダリング開
始からのduration（期間）とdelay
（開始遅延）でコントロールする


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LELKNVRRJR.jpg)

「良さそう」
（表現力の柔軟性と開発体験が人気のカギ？）


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4JM2XGRPJW.jpg)

Q. 『 はたして、クリエイティブなLPを
マークアップするときにMotionを
採用しても大丈夫なのだろうか...? 』
（GSAPのtimelineを使えば大概の要件には対応できたけど・・・）


# Page. 14

![Page Image](https://bcdn.docswell.com/page/PJRMNZRYE9.jpg)

A. 『大丈夫です！Motionを使ってGSAPで
実現していたことを問題なく実装できます』
→→ 実行順序に関するmotionを使った実装例を３つ紹介します


# Page. 15

![Page Image](https://bcdn.docswell.com/page/PEXVN9R47X.jpg)

motionでアニメーション実行順序を制御する実装例１
useAnimate() を使う


# Page. 16

![Page Image](https://bcdn.docswell.com/page/3EKQNPRPED.jpg)

useAnimate()のコードのイメージ
ほぼ、useGSAPと同じように実行順序
に沿って命令的に実行できる。
（async awaitで遅延するのも可）
GSAPと比べて、アニメーションを
付与するDOMのコンテナにrefを渡
すところも同じ


# Page. 17

![Page Image](https://bcdn.docswell.com/page/L73PVX84E5.jpg)

useAnimate() を使う
記述方法がuseGSAP()とスゴい似てる
けど、motionで実際に実装するとあまり使わない
（React上でDOMの指定にセレクターを用いるのが負担に感じる）


# Page. 18

![Page Image](https://bcdn.docswell.com/page/87DL82M5EG.jpg)

Motionでアニメーション実行順序を制御する実装例２
delayプロパティを構造化して使う


# Page. 19

![Page Image](https://bcdn.docswell.com/page/VJP281RDJ8.jpg)

単純にdelayプロパティを構造化して使う


# Page. 20

![Page Image](https://bcdn.docswell.com/page/2EVDNYRGEQ.jpg)

単純にdelayプロパティを構造化して使う
variant という文字列にアニメーションをまとめる機能も
motionは持ってるけど構造化するだけで充分見通しが良くなる
アニメーションの終わりから計算する感覚を掴めば、
durationとdelayでもtimelineとほぼ同じように使いこなせる


# Page. 21

![Page Image](https://bcdn.docswell.com/page/57GYK96D7L.jpg)

motionでアニメーション実行順序を制御する実装例３
シーン切り替え系はAnimatePresenceを使う


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4EQMNW4XJP.jpg)

シーン切り替え系はAnimatePresenceを使う


# Page. 23

![Page Image](https://bcdn.docswell.com/page/KJ4VGKQ2E1.jpg)

シーン切り替え系はAnimatePresenceを使う
exit（要素が消えるときに発火する）
アニメーションを定義できる


# Page. 24

![Page Image](https://bcdn.docswell.com/page/LE13DXPKJG.jpg)

シーン切り替え系はAnimatePresenceを使う
一番最後に動く要素のonAnimationComplete で
「もろもろのアニメーションが終わったら...」を発火させる


# Page. 25

![Page Image](https://bcdn.docswell.com/page/GEWPYN2PJ2.jpg)

まとめ
『Motionを信じて採用しよう！』


