上記のようにボタンを押したら先頭に要素を追加したいというシーンがある。
そんなときに気になるのが、折り返し（段落ち）によって右端にある要素がどこかに消えてしまったかのように錯覚する。それを軽減するためにpositionが動くようなアニメーションを追加したいが、自前で用意するにはかなり実装が手間であることは想像するまでもない。

そこで使いたいのが framer-motion 。
アニメーションの定番ライブラリだが、実はレイアウトに関するアニメーション機能も提供されている。

先に挙げた問題がわずか6文字追加するだけで解決できてしまう。

実装する

余計な部分は極限まで省き必要な箇所だけを書いておく。

import { motion } from 'framer-motion';

// 中略

<div className="flex flex-wrap">
  <motion.div layout>
    <p>ハロー</p>
  <motion.div>
</div>

// 省略

なんと、motoin.divに対して layout を付けるだけで実現できてしまう。
親要素にはflexboxやgridを指定しておくだけ。

実際には <motion.div laytout> ~ </motion.div> を .map 等でループで出力することで実装することになるが、特に難しい記述も何もせず、layout と付けるだけでframer-motionが全てお世話してくれる。

しかも、ブラウザサイズを変更せずに要素の幅が変わっただけの場合でも勝手に動いてくれる。面倒見が良すぎるライブラリである。

framer-motionは魔法である

マジで魔法。