Framer motion : Transition 속성 종류에 대해 알아보자

Framer motion의  transition의 경우에는 css 속성 중 transition과 관련된 별도의 속성이 사용된다.

속성	설명
duration	애니메이션이 지속되는 시간 설정 (단위 : 초)
delay	애니메이션이 시작되기 전에 지연되는 시간 설정 (단위 : 초)
ease	애니메이션의 시간 흐름에 따른 매개변수의 변화율(easing함수)를 설정 * 기본값 : easeInOut | linear | easeIn | easeOut | easeInOut
type	애니메이션의 유형을 설정  *기본값 : spring | tween | inertia
stiffness	스프링애니메이션의 강성(물체가 변형에 저항하려는 성질)을 설정
damping	스프링애니메이션의 감쇠(물체의 운동을 저지시키려는 힘)를 설정
mass	스프링애니메이션의 질량을 설정, 값이 클수록 애니메이션이 더 느리게 완료
repeat	애니메이션을 반복하는 횟수 설정 * 무한반복 : infinity
repeatType	애니메이션 반복 유형을 설정 * loop | reverse | mirror
repeatDelay	반복 애니메이션 사이의 지연 시간을 설정 (단위 : 초)

* stiffness | damping | mass의 경우에는 transition type이 spring일 때만 사용된다.

 

만약 ease에서 cubic-bezier를 사용해서 애니메이션의 cubic-bezier(0,1.68,1,.06)을 사용하고 싶을 때는 transition = {{ease : [0,1.68,1,.06}} 으로 설정해서 사용할 수 있다.

import { motion } from "framer-motion";

export default function Comp01() {
    return (
        <motion.div
            initial={{ x: -500 }}
            animate={{ x: 0 }}
            transition={{
                //애니메이션을 2초 동안 시작
                duration: 2,
                //애니메이션을 3초 뒤에 시작
                delay: 3,
                //linear로 애니메이션 흐름 설정
                ease: "linear",
                //type, stiffness, damping 설정 
                type: "spring",
                stiffness: 500,
                damping: 10
            }}>
            Framer Motion 예제
        </motion.div>
    );
}