【framer-motion】特定のアニメーションが終了してからアニメーションを実行させる

import { memo } from "react";
import { motion } from "framer-motion";

// 子要素データ
const data = [
  {
    id: 1,
    background: `cadetblue`,
  },
  {
    id: 2,
    background: `rebeccapurple`,
  },
  {
    id: 3,
    background: `pink`,
  },
];

const mainVariants = {
  open: {
    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
  },
  closed: {
    transition: { staggerChildren: 0.05, staggerDirection: -1 },
  },
};

const itemVariants = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
      y: { stiffness: 1000, velocity: -100 },
    },
  },
  closed: {
    y: 50,
    opacity: 0,
    transition: {
      y: { stiffness: 1000 },
    },
  },
};

const Stagger = () => {
  return (
    <div className="w-screen h-screen bg-slate-100">
      <motion.div
        variants={mainVariants}
        initial="closed"
        animate="open"
        className="w-full h-full flex flex-col justify-center items-center gap-y-6"
      >
        {data.map((item) => (
          <motion.div
            variants={itemVariants}
            key={`item-${item.id}`}
            className="w-40 h-40 bg-red-200"
          />
        ))}
      </motion.div>
    </div>
  );
};

export default memo(Stagger);

variantで親要素と子要素で連動させたいアニメーション名は同じにすること

// 親要素variant
const mainVariants = {
  open: {
    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
  },
  closed: {
    transition: { staggerChildren: 0.05, staggerDirection: -1 },
  },
};

// 子要素variant
const itemVariants = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
      y: { stiffness: 0, velocity: -100 },
    }, 
  },
  closed: {
    y: 50,
    opacity: 0,
    transition: {
      y: { stiffness: 1000 },
    },
  },
};

staggerChildren

前の子要素のアニメーションが終わってから、次の子要素のアニメーションが開始するまでの遅延時間
staggerChildren:0.1とした場合、2つ目以降の子要素は、前の子要素のアニメーションが終了してから0.1秒後に開始する

delayChildren

親要素のアニメーションが開始してから、最初の子要素のアニメーションを開始させるまでの遅延時間。
delayChildren:0.5とした場合、最初の子要素は、親要素のアニメーションが開始してから0.5秒後に開始する。

親要素のアニメーションが"開始"してから0.5秒後であることに注意。

staggerDirection

アニメーションを開始させる子要素の順番。
1:最初の子要素からアニメーション開始
-1:最後の子要素からアニメーション開始

stiffness

す animate="open"
className="w-full h-full flex flex-col justify-center items-center gap-y-6"
>
{data.map((item) => (
<motion.div
variants={itemVariants}
key={item-${item.id}}
className="w-40 h-40 bg-red-200"
/>
))}


);
};

export default memo(Stagger);

## variantで親要素と子要素で連動させたいアニメーション名は同じにすること
```react
// 親要素variant
const mainVariants = {
  open: {
    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
  },
  closed: {
    transition: { staggerChildren: 0.05, staggerDirection: -1 },
  },
};

// 子要素variant
const itemVariants = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
      y: { stiffness: 0, velocity: -100 },
    }, 
  },
  closed: {
    y: 50,
    opacity: 0,
    transition: {
      y: { stiffness: 1000 },
    },
  },
};

staggerChildren

前の子要素のアニメーションが終わってから、次の子要素のアニメーションが開始するまでの遅延時間
staggerChildren:0.1とした場合、2つ目以降の子要素は、前の子要素のアニメーションが終了してから0.1秒後に開始する

delayChildren

親要素のアニメーションが開始してから、最初の子要素のアニメーションを開始させるまでの遅延時間。
delayChildren:0.5とした場合、最初の子要素は、親要素のアニメーションが開始してから0.5秒後に開始する。

親要素のアニメーションが"開始"してから0.5秒後であることに注意。

staggerDirection

アニメーションを開始させる子要素の順番。
1:最初の子要素からアニメーション開始
-1:最後の子要素からアニメーション開始

stiffness

スプリングの硬さ
スプリングの硬さを下げることで、アニメーション全体がゆっくり進むようになる

velocity

ベロシティ本来の意味は、ベクトル的な意味での「速度」であり、速さと方向性をもつ。
プロパティとしてはスプリングの弾力を表現する速度。