framer-motion API 탐구하기

TOC

1. framer-motion

2. 기본적인 사용법

3. motionValue

1. framer-motion

figma는 너무 유명해서 아는 사람이 많다.

물론 framer-motion도 아는 사람이 많다. 하지만 framer API와 framer-motion은 아는 사람이
좀 부족한건 사실인 것 같다.

아무튼 사용해보니 좋아 생각을 정리하기 위해 이렇게 글을 작성한다.

1-1. react-spring vs framer

react-spring은 실제 사용자가 더 많은 npm이다. 하지만 어렵다..
tutorial이 초보자에게는 약간 허들로 보일 수 있다.

framer는 비교적 쉽게 작성할 수 있다. 물론 쉬운 API는 내부 구조를 이해하기 어려운 경우가 많은데
아마 이 경우가 아닐까..

둘 다 찍먹을 해보다가 결국 framer의 손을 들기로 했다.
또 마음을 바꿀지 모르지만 일단 한 우물을 파도록 하자.

1-2. framer의 기본적인 사용법

1. motion.div
2. with styled-component

motion.div

import {motion} from 'framer-motion'

...
return(
<motion.div
  {your action}
  />
)

기본 문법이다.

여기에 styled-component를 섞어보자!

motion.div + styled-component

import {motion} from 'framer-motion'
import styled from 'styled-component'

const Wrapper=styled(motion.div)`
width:1;
height:1;
...
`

...
return(
<Wrapper 
  {your action}
  />
)

어차피 styled-component를 사용할 것이라면 이렇게 하는게 좋다.
공식 doc에도 위 방법이 나와있다. 이렇게하면 style 부분과 action을 따로 떼어낼 수 있고
코드를 읽기 간편해진다.

물론 styled의 props 등도 모두 사용가능하니 난 위 방법을 사용할 것이다.

2. 기본적인 사용법

1. framer와 framer-motion

기존의 framer에서 framer-motion이 나왔다.
react class에서 hook이 나온것과 비슷하다.

framer는 인터넷에 널려있는 예제 코드가 많지만 motion은 적다.
이 차이점은 생각보다 큰데 framer에서 사용되는 코드가 motion에서도 사용되는 것 같다. 정확히는 알 수 없으나 doc에는 없는 yoyo 키워드 등이 그냥 사용이 되고 잘 동작한다는 점 등등..

아무튼 잡설은 그만하고 기본적인 사용법을 알아보자.

어차피 doc을 긁어와 해석을 하는 것이다.

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{ scale: 2 }}
    transition={{ duration: 0.5 }}
  />
)

initial과 animate

initial은 keyFrame의 from과 동일하다.
초기상태를 지정하고 initial에서 부터 animation이 시작된다.

animate는 to와 동일한데
최종 animation이 모두 동작하고 나서의 상태를 나타낸다

exit도 있는데 이는 모두 사용해 사라진 component를 tree에서 지워버리는 옵션이다.
다른 api와 함께 사용하므로 나중에 알아보자.

transition은 기존 css와 동일하고 duration은 initial -> animate로의 진행 시간을 나타낸다.

이정도만 알아도 사실 많은 것을 알아낸 것이다.

https://www.framer.com/api/motion/motionvalue/#usevelocity

문서를 보는것이 최고의 지름길이다. 나머지 알아두면 좋은 것은 다음 포스팅에...