framer-motionの画面内に要素が出入りするアニメーションの実装

全体のコード

        variants={{
          offscreen: {
            y: 100,
            opacity: 0,
          },
          onscreen: {
            y: 0,
            opacity: 1,
            transition: {
              duration: 0.5,
            },
          },
        }}
        initial="offscreen"
        whileInView="onscreen"
viewport={{ once: true, amount: 0.3 }}

オプション

・ initial="offscreen"はアニメーションの初期値を表す。本来は波括弧だがvariantsでアニメーションの挙動を定義している場合はクォーテーションでくくってあげる。

・ whileInView="onscreen"は画面内に入った時のアニメーションを定義できる。initialと同じで本来は波括弧だがvariantsでアニメーションの挙動を定義している場合はクォーテーションでくくってあげる

・viewport={{ once: true, amount: 0.3 }}にはいくつかのオプションを設定できる。
once: true
画面内に入るたびにアニメーションを実行するか(true)、1回限りの動作をさせるのか(false)を真偽値で判定。
amount: 0.3
画面内に入った時にどの位置で発火させるのかを定義できる。0が画面内に入った瞬間。0.5とかにするとちょうど真ん中あたりで発火する。
margin
amountと似ているが、margin: "-100px"と指定すると要素が画面内に入ってから100px進んだらアニメーションを発火するようにできる。
root
root: 〇〇で指定した特定のDOM要素が画面内に入った時にアニメーションを発火するようにできr。
初期値はnull。