【Gatsby製ブログ】framer-motionでスクロールしたらフワッと表示させる

import { motion, useAnimation } from "framer-motion" //useAnimationをframer-motionからインポートする
…

- const [color, setColor] = useState("red"); //このuseStateは必要なし
+ const control = useAnimation(); //代わりにuseAnimationでアニメーションのコントロールをする

- const colorChange = (e) => {setColor(e.target.value)} ;
+ const colorChange = (e) => {control.start(e.target.value)} ;
//さっき定義したuseAnimationを「.start("アニメーション先")」でアニメーションスタートさせる。
//"アニメーション先"はvariantsでの状態名を指定もいいし、直接状態を定義してもOK。

const changeColorVariants = { //状態を3つ（red、blue、green）Variantsで準備しておく。
  red: {
    color: "white",
    backgroundColor: "#ff0000",
    transition: {
      duration: 2,
    }
  },
  blue: {
    color: "white",
    backgroundColor: "#0080ff",
    transition: {
      duration: 2,
    }
  },
  green: {
    color: "white",
    backgroundColor: "#00fa9a",
    transition: {
      duration: 2,
    }
  }
}

return (
  …
  <motion.div
    variants = {changeColorVariants}
    initial = "red"
    - animate = {color} 
    + animate = {control} //animateには定義したuseAnimationのコントロールを指定
    style={{fontSize:"3rem", width: 600, height: 200, textAlign: "center", lineHeight: "200px" }}
  >
    Variantsのテストだよ
  </motion.div>
  <input type = "radio" name ="colorselect" value = "red" onChange = {colorChange} }/><label>赤</label>
  <input type = "radio" name ="colorselect" value = "blue" onChange = {colorChange} }/><label>青</label>
  <input type = "radio" name ="colorselect" value = "green" onChange = {colorChange} /><label>緑</label>
  …
)

$ yarn add react-intersection-observer

import { useInView } from 'react-intersection-observer' //useInViewをreact-intersection-observerからインポート
…

const [ref, inView] = useInView();

…
<div ref={ref}>この要素が入ったらinViewがtrueになるよ。</div>

import React, { useEffect } from "react";
import Layout from "../components/layout";
import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";

const ScrollAnimationTest = ({ data, location }) => {
  const control = useAnimation(); //useAnimationを使ってコントローラーを作っておく。
  const [ref, isInView] = useInView({triggerOnce: true}); 
  //↑useInView。refで参照している要素が画面内に入ったらisInViewがtrueになる

  const scrollVariants = {
    visible: {
      y: 0,
      opacity: 1,
      transition: {
      //duration（アニメーションの長さ）とdelay（アニメーションを遅らせる）をイイカンジに設定する。
      //そうしないとスクロールアニメーションっぽくない。
        duration: 1,
        delay: 0.8,
        type: "spring",
      },
    },
    hidden: {
      y: 30,
      opacity: 0,
    },
  }

  useEffect( //useEffectを使って、要素が画面内に入ったらcontrolをvisibleにする
    ()=>{
      if(isInView){
        control.start("visible");
      }
    },
    [isInView]
  );

  return (
    <Layout location={location} title="Scroll Animation Test" >
      <div style={{fontSize: "5rem", height: "150vh"}}>
        あれは…なんだ！？
      </div>

      <motion.div
        style={{fontSize: "8rem", height: "50vh"}}
        ref = {ref} //refで、useInViewでこの要素を参照するようにする。
        variants = {scrollVariants}
        initial = "hidden"
        animate = {control} //animateはcontrolを指定。これでcontrolの状態にアニメーションしていく
      >
        クマだ！！クマが出たぞ！
      </motion.div>
    </Layout>
  )
}

export default ScrollAnimationTest

…
-  const [ref, isInView] = useInView({triggerOnce: true}); 
+  const [ref, isInView] = useInView(); //triggerOnceを外して、何度でも判定をするようにする。 
…
  useEffect(
    ()=>{
      if(isInView){
        control.start("visible");
      }
+      if(!isInView){ //画面外に外れた際のcontrolを"hidden"にする処理を追加
+        control.start("hidden");
+      }
    },
    [isInView]
  );
…