Framer Motion
FramerというUIプロトタイプツールがあり、そこが提供しているアニメーション用ライブラリという感じらしい /imo-icon/hr.icon/imo-icon/hr-long.icon
<motion.div>や<motion.h1>のようにmotionコンポーネントによって要素を指定し操作
style属性とanimate属性という似た感じの属性がある
いずれもstyle={{ rotate: hoge }}、animate={{ rotate: hoge }}のように任意の値を受け取る
https://gyazo.com/4462d34a7318c8a87aba57322f736971https://gyazo.com/0a6eaa1c1d11f1839b59f13d39863817https://gyazo.com/2be836804f30300814187cc91dbe5a58
animateの動きにはtransition={{ ease: 'linear' }}のように指定が可能
イーズにはデフォルトではspringという値が入っている
styleは単に値を受け取るだけで、animateは別途propを受け取ることも可能、という使い分け?
計算した値を受け取る場合はstyleの方が良さそう