[Framer motion] 기본 사용법

Motion (Framer motion)은 브라우저의 하드웨어 가속을 사용한 애니메이션과 자바스크립트 애니메이션 둘 다 사용하여 구현된 애니메이션 라이브러리입니다.

사용법

기본적인 사용법

기본적인 사용법은 Motion 라이브러리에서 제공하는 Dom element을 확장한 element를 사용합니다.

import {motion} from 'motion/react'

<motion.div/>

 

애니메이션을 추가하려면 animate prop를 넘깁니다.

import {motion} from 'motion/react'

<motion.div
  animate={{
    scale: 2,
    transition: { duration: 2 }
  }}
/>

 

초기 상태 애니메이션

애니메이션의 초기 상태를 정의하려면 initial prop을 넘깁니다.

import {motion} from 'motion/react'

<motion.button initial={{ scale: 0 }} animate={{ scale: 1 }} />

 

초기 진입 에니메이션을 설정하지 않으려면 initial에 false를 넘깁니다.

import {motion} from 'motion/react'

<motion.button initial={false} animate={{ scale: 1 }} />

 

제스처 애니메이션

제스처 애니메이션을 똑같이 prop으로 넘기면 됩니다.
hover, focus, tab, drag등의 제스처를 지원합니다.

import {motion} from 'motion/react'

<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
  onHoverStart={() => console.log('hover started!')}
/>

스크롤 애니메이션

Motion은 scroll-triggered와 scroll-linked 애니메이션 둘 다 지원합니다.

Scroll triggered 애니메이션

scroll-triggered 애니메이션을 구현하려면 whileInView prop을 넘기면 됩니다.

whileInView prop은 해당 element가 viewport에 enter/leave 됐을 때 애니메이션의 to/from의 상태를 정의합니다.

 

import {motion} from 'motion/react'

<motion.div
  initial={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }}
  whileInView={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }}
/>

 

Scroll linked 애니메이션

스크롤 위치를 value에 대응시키는 scroll linked 애니메이션을 구현하려면 useScroll훅을 사용하여 motionValue사용하면 됩니다.

import {motion} from 'motion/react'

const { scrollYProgress } = useScroll()

return <motion.div style={{ scaleX: scrollYProgress }} />

 

Layout 애니메이션

Motion은 Layout 전환간의 애니메이션을 transform만을 사용해서 구현하였습니다.

import {motion} from 'motion/react'

<motion.div layout />

 

layout prop은 css에서 transition을 적용할 수 없는 justify-content 비롯한 어떠한 property에도 transition을 적용할 수 있게 해줘서 중요합니다.

자세한 내용은 다음 포스트로 남기도록 하겠습니다.