Framer motion : MotionConfig으로 전역으로 애니메이션을 설정해보자

MotionConfig는 애니메이션을 전역으로 설정할 수 있는 컴포넌트이다. 모든 컴포넌트에 적용 될 기본 애니메이션 설정을 한번에 할 수 있다. 

• <MotionConfig transition={{}} reduceMotion={{"user" | "always" | "never"}}>
       <motion.태그/>
  </MotionConfig>

transition은 모든 모션 컴포넌트에 적용될 기본 transition 속성을 설정하고, reduceMotion에서 "user"는 사용자의 설정에 따라, "always"는 항상 애니메이션을 최소화하고, "never"은 애니메이션을 항상 적용한다는 의미의 속성이다. 

 

MotionCongif 사용하기

1. 전역으로 적용할 transition 속성을 <MotionConfig> 컴포넌트에 정의한다.

import { MotionConfig, motion } from 'framer-motion';

function App() {
    return (
        
        <MotionConfig 
            transition={{ duration: 0.5, ease: "easeInOut" }} // 기본 전환 설정
            reduceMotion="user" // 사용자 설정에 따라 애니메이션 감소
        >
        </MotionConfig>
    );
}

export default App;

 

 

2. 해당하는 애니메이션을 사용할 모션 컴포넌트를 <MotionConfig> 태그 사이에 삽입한다.

import { MotionConfig, motion } from 'framer-motion';

function App() {
    return (
        
        <MotionConfig 
            transition={{ duration: 0.5, ease: "easeInOut" }} // 기본 전환 설정
            reduceMotion="user" // 사용자 설정에 따라 애니메이션 감소
        >
            <motion.div
                initial={{ opacity: 0, scale: 0.9 }} // 초기 상태
                animate={{ opacity: 1, scale: 1 }} // 애니메이션 상태
            >
                첫번째 div
            </motion.div>
            <motion.div
                initial={{ x: -100 }}
                animate={{ x: 0 }}>
                두번째 div
            </motion.div>
        </MotionConfig>
    );
}

export default App;

 

duration과 ease 속성이 동시에 적용된 것을 볼 수 있다.