Framer Motion Cheat sheet

Motion Component

• motion 으로 시작하는 컴포넌트
• ex. motion.div

PROP

• initial
• animate
  • 둘다 css를 지정한다.
  • initial : 기본상태, animate : 애니메이팅 될 상태
• transition : 애니메이팅 속도 등을 지정한다.애니메이션 타입을 지정할수도 있다.
  • time 으로 키프레임이 차지할 비율을 정할수 있다.
    
• exit : 컴포넌트가 언마운트될때 애니메이팅 된다.
• layout : 자신의 레이아웃이 변경되는것도 애니메이팅 한다.
  • 현재 위치, 등등

Multiple transition

• 여러 값을 넣어 y가 순차적으로 바뀌도록 한 예시
• transition -> times 로 시점 지정 가능.

AnimatePresence

• exit 애니메이션을 실행하기 위해선 motion div 를 이것으로 감싸야 한다.
• exit 애니메이션이 실행될 mode를 지정할수 있다.

---

Gesture

• motion 컴포넌트에 사용되는 prop 형식
• while으로 시작

whileTap

• 클릭했을때 애니메이팅 될 것을 지정한다.

whileHover

• 마우스를 올려두었을때 애니메이팅 될 것을 지정한다.

MotionConfig

• 여러 motion component가 동일한 prop을 공유해야 할때 사용
• 이곳에 prop을 작성하고 안에 motion component를 추가한다.

---

AnimationControl

• 특정 애니메이션이 특정 시점에 재생되도록 할수 있다.

1. useAnimateControls() 로 컨트롤러를 생성한다
   
2. animate 로 motion 컴포넌트를 지정한다.
   
3. controls로 애니메이션 상태의 지정이 가능하다.
   

motion.div variants

• 이름을 지정해 애니메이션 상태를 지정할수 있다.
  
• initial 을 통해 기본 상태의 지정이 가능하다.

---

View Base Animation

motion.div 의 whileView

• 컴포넌트가 화면에 들어왔을때 재생될 애니메이션의 지정이 가능하다.

일반 div에 사용하기

const ref = useRef(null);
const isInView = useInView(ref, { once: true });

1. ref를 만들고, useInView로 ref를 지정한다.

<div
        ref={ref}
        style={{
          height: "100vh",
          background: isInView ? "blue" : "red",
          transition: "1s background",
        }}
      />

2. ref 지정시, div가 화면에 들어오면 isInView가 true가 된다.

---

Scroll based animation

• useYProgress 로 스크롤이 얼마나 되었는지 0~1 사이의 값으로 보인다,
• scaleX는 useSpring을 통해 scrollYProgress 의 값에 스프링 애니메이션 효과를 추가한다.
• useTransform 은 scrollYProgress 가 0~1 사이일때 세번째 인자 값을 1대1 매칭하여 리턴한다.
  • 2개 이상의 단계를 둘수 있다.

useScroll

• Progress 붙은건 0~1 아닌건 절대좌표