BuriKaigi 2025
採択
ライトニングトーク(5分)
アニメーションライブラリMotion（旧Framer Motion）でタイムラインに基づくアニメーションを実装するには
長尾准誠
junpai_code
最近では、Reactを使ってアニメーションを実装するシーンでは、Motionが人気です。
Webアニメーションの実装では、古くからGSAP（GreenSock Animation Platform）が有名でした。特にタイムラインという形のAPIで動画編集のようにアニメーションの変化を指定できるAPIが人気でした。
しかしながら、GSAPとは違いタイムラインに基づくアニメーションを実装するためのAPIがMotionには提供されていません。
本LTでは、Motionを使用してタイムラインをベースしたアニメーションの実装例を紹介します。