Variants

import React from 'react';
import styled from "styled-components"
import { motion } from "framer-motion";

const Wrapper = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const circleVariants = {
  start: {
    opacity: 0,
    y: 10,
  },
  end: {
    opacity: 1,
    y: 0,
  },
}
const boxVariants = {
  start: {
    opacity: 0,
    scale: 0.5,
  },
  end: {
    scale: 1,
    opacity: 1,
    transition: {
      type: "spring",
      duration: 0.5,
      bounce: 0.5,
      delayChildren: 0.5,
      staggerChildren: 0.2,
    },
  },
}

const Box = styled(motion.div)`
  width: 200px;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;
const Circle = styled(motion.div)`
  background-color: #e59d9d;
  height: 70px;
  width: 70px;
  border-radius: 40px;
  place-self: center;
`;

const Variants = () => {

    return (
        <Wrapper>
          <Box variants={boxVariants} initial="start" animate="end">
            <Circle variants={circleVariants} />
            <Circle variants={circleVariants} />
            <Circle variants={circleVariants} />
            <Circle variants={circleVariants} />
          </Box>
        </Wrapper>
    )
}

export default Variants;

staggerChildren을 사용하면 variants 각각 따로 설정하는 불편함 없이 자식 속성들에게 전부 적용이 가능합니다.