Framer motion : variants에 대해서

Framer motion에서 variants는 애니메이션의 다양한 상태를 미리 정의하여 반복되는 애니메이션 등의 사용을 간편하게 작성할 수 있다. 하나의 데이터로 여러 곳에서 사용할 수 있어 코드 중복을 줄이고 가독성을 높인다.

 

1. variants 생성 

clickVariants를 생성하여 요소들에게 마우스를 올려놨을 때나 클릭했을 때의 애니메이션을 설정한다.

const clickVariants = {
    initial: { scale: 1 },
    hover: { scale: 1.1 },
    press: { scale: 0.9 },
};

 

 

2. <motion> 태그 안에 variants={variants이름} 작성

<motion.button variants={clickVariants}>
버튼클릭
</motion.button>

 

3. 애니메이션을 적용할 곳에 key 값을 작성

initial은 initial에, hover는 whileHover 이벤트에 그리고 press는 whileTap이벤트에 애니메이션을 적용할 것이다.

<motion.button
    variants={clickVariants}
    initial="initial"
    whileHover="hover"
    whileTap="press">
버튼클릭
</motion.button>

 

<< 예제 전체 코드 >> 

import { motion } from "framer-motion";

const clickVariants = {
    initial: { scale: 1 },
    hover: { scale: 1.1 },
    press: { scale: 0.9 },
};

export default function Comp01() {
    return (
        <div>
            <motion.div
                variants={clickVariants}
                initial="initial"
                whileHover="hover"
                whileTap="press"
                style={{width: 100, heigth:100, backgroundColor:"lightgray"}}>
                DIV클릭
            </motion.div>
            <motion.button
                variants={clickVariants}
                initial="initial"
                whileHover="hover"
                whileTap="press">
                버튼클릭
            </motion.button>
        </div>
    );
}

 

반복적으로 사용되는 애니메이션의 경우 이렇게 variants를 생성하여 key 값을 사용하여 간단하게 쓸 수 있다. 

 

위의 예제의 경우에는 scale의 값을 전부 다 동일하게 적용했다. 하지만 어떤 경우에는 각각의 요소가 다른 값을 가져야하는 경우가 생긴다. 이럴 때에는 variants를 함수로 정의하여 동적으로 애니메이션을 변경할 수 있다. 아래 예제의 경우 hover를 했을 때 각각 다른 scale의 값을 적용해보았다. 

import { motion } from "framer-motion";

const clickVariants = {
    initial: { scale: 1 },
    hover: custom => ({ scale: custom }),
    press: { scale: 1.2 },
};

export default function Comp01() {
    return (
        <div>
            <motion.div
                variants={clickVariants}
                custom={3}
                initial="initial"
                whileHover="hover"
                whileTap="press"
                style={{width: 100, heigth:100, backgroundColor:"lightgray"}}>
                DIV클릭
            </motion.div>
            <br/>
            <motion.button
                variants={clickVariants}
                custom={1.3}
                initial="initial"
                whileHover="hover"
                whileTap="press">
                버튼클릭
            </motion.button>
        </div>
    );
}

 

div와 버튼의 hover했을 때의 scale이 다른 것을 볼 수 있다.