🐈

framer-motionでアコーディオンを作る

2022/09/27に公開約1,100字

概要

  • framer-motionを使ってアコーディオンを作る
  • framer-motion accordionの内容が自分の環境下では動かなかった
  • また、内容が複雑でチュートリアルには難易度高いので、まず簡単なものが作りたかった

設計

ドキュメントでframer-motionを理解

AnimatedComponent

  • AnimatedComponentで囲むと、普通は、非表示 -> 表示 (マウント) のタイミングしか制御できないのを、表示 -> 非表示(アンマウント)のタイミングでも制御できるようになる
  • 特にアコーディオンなどで効果を発揮。開くときも閉じるときも同様にアニメーションできる

使ってみるも、エラーに阻まれる

(0 , react__WEBPACK_IMPORTED_MODULE_0__.useId) is not a function

AnimatedComponentが一筋縄では使えなくて困った。

これが近い
https://github.com/framer/motion/issues/1447

package.jsonのframer-motionのバージョンを変えてみる

"framer-motion": 7.3.6 -> 6.2.10
  • こちらの方がframer-motionのバージョンを含め使っている環境が近かったので参考にして解決

まとめ

  • AnimatedComponentでエラーが出た際はframer-motionのバージョンを気にする
  • motion.divなどのframer独自のエレメントの位置関係が不適切だとエラーが出るので、動いている人のコードを参考にすると良い

Discussion

ログインするとコメントできます