docs : https://www.framer.com/motion/introduction/

npm install framer-motion

flamer motion

import { motion } from "framer-motion"

例：箱がx方向に200px移動

"use client";
import React from "react";
import { motion } from "framer-motion";

const CanvasTesting = () => {
  return (
    <motion.div animate={{ x: 200 }}>
      <div className="bg-teal-400 w-32 h-32 my-32"></div>
    </motion.div>
  );
};

export default CanvasTesting;

• "use client"; が必要
• motion.div が基本
• motion.button のようにもできる
• Docsはreactコンポーネントのように使っているが、< />だけだとnextjsでは機能しない
• <motion.div> </motion.div>の中にアニメーションさせたい要素を入れる
• next/linkやnext/imageコンポーネントには使えない

transition={{ delay: 3, duration: 4 }}

• delayは開始までのラグ

variants まとめて管理

一連のアニメーションを使いまわせるようになる

variantsの作成：

  const testVariants = {
    conditionA:{
      x: 100 , y: 100
  },
		conditionB:{
      x: 200 , y: 200
  }

variantsの使用：

      <motion.div
        variants={testVariants}
        animate="conditionA"
        initial="conditionB"
      ></motion.div>

• variants={} , {}内にvariant名
• animateやinitialではstringでvarintを指定

const [open, setOpen] = useState(false);
==
<button onClick={() => setOpen(!open)}>
==
animate={ open ? "conditionA" : "conditionB"}

• 条件によってanimationを変える例

頻度が高そうなもの

whileHover : PC / whileTap スマホ

<motion.div
      whileHover={{
        scale: 1.2,
        transition: { duration: 1 },
      }}
      whileTap={{ scale: 1.2 }}
    >
      <div className="h-24 w-24 bg-red-400"></div>
</motion.div>

• 両者はセットがデフォと考えたほうがいいかも。 スマホもPCも実現したい動きは同じだから

whileHover={{ x: 10 }}
whileTap={{ x: 10 }}

whileFocus : inputタグなどで

<motion.input whileFocus={{ scale: 1.1 }} className="border">
        
</motion.input>

drag :

<motion.div drag>
        aaa
</motion.div>

要素を自由にうごかせる

drag="x” , drag="y”

whileInView : 画面に移るとアニメーション実行

下から上に戻る時も実行される

<motion.div
        whileInView={{ opacity: 1 }}
        initial={{opacity: 0.1}}
        className="h-screen bg-orange-600 mt-96"
      >
</motion.div>