Framer-motion 리액트 애니메이션 라이브러리

Framer-motjon

• 리액트를 위한 오픈소스 프로덕션레디 모션 라이브러리

프로덕션 레디란?

사용자의 요구-사용성, 의존성, 가용성-을 충족 시키는 소프트웨어. 실제 운영 환경에서 구동이 가능한 코드.

• 설치

npm install framer-motion

import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)

• Animations

  • Motion 컴포넌트를 animate 속성을 통해 제어하며, 간단한 애니메이션은 animate props에서 직접 값을 설정할 수 있습니다.

  • <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }}>

• Gestures

  • 제스쳐는 리액트 이벤트 시스템을 확장하여 사용하며 호버, 탭, 드래그를 지원합니다.

  • <motion.div
      whileHover={{ scale: 1.2 }}
      whileTap={{ scale: 1.1 }}
      drag="x"
      dragConstraints={{ left: -100, right: 100 }}
    />

• Variants

  • Variants를 통해 애니메이션의 하위 트리를 하나의 animate prop으로 표현할 수 있습니다.

  • const list = { hidden: { opacity: 0 } }
    const item = { hidden: { x: -10, opacity: 0 } }
    
    return (
      <motion.ul animate="hidden" variants={list}>
        <motion.li variants={item} />
        <motion.li variants={item} />
        <motion.li variants={item} />
      </motion.ul>
    )

• MotionValues

  • MotionValues는 애니메이션 값의 상태와 속도를 추적합니다. 모든 모션 컴포넌트는 내부적으로 MotionValues를 사용하여 애니메이션 값의 상태와 속도를 추적합니다. 일반적으로 이들은 자동으로 생성됩니다.

  • MotionValue는 React State가 아니기 때문에 Motion Value값이 바뀌어도 리랜더링이 일어나지 않는다.

  • import { motion, useMotionValue } from "framer-motion"
    
    export function MyComponent() {
    const x = useMotionValue(0)
    const input = [-200, 0, 200]
    const output = [0, 1, 0]
    const opacity = useTransform(x, input, output)
    // const potato = useTransform(x, [-200, 0, 200], [0, 1, 0])
    
    return <motion.div drag="x" style={{ x, opacity }} />
    // 요 컴포넌트의 움직임(X값)에 따라 opacity가 결정된다.

  • useMotionValue() useMotionValue 후크로 MotionValues를 생성할 수 있습니다. useMotionValue에 전달된 값은 MotionValue의 초기 상태로 작동합니다.

  • useTransform 훅을 통해 MotionValues를 연결합니다.
    useTransform()는 한 값 범위에서 다른 값 범위로 매핑하여 다른 MotionValue의 output을 변환하는 MotionValue를 만듭니다.
    x(Motion Value)값을 다른 output값으로 변환해줍니다.

  • 반응형 웹이 잘 구성된 페이지에선 스크롤 경험도 재밌었는데 요 모션밸류에 useScroll()을 사용하면 스크롤에 따른 애니메이션이 구성가능하다. useScroll은 뷰포트가 스크롤될 때 업데이트되는 MotionValues를 리턴합니다.

  • scrollX	수평 스크롤 픽셀	ex)500px
    scrollY	수직 스크롤 픽셀	ex)500px
    scrollXProgress	0~1사이값 수평스크롤
    scrollYProgress	0~1사이값 수직스크롤

    export const MyComponent = () => {
    const { scrollYProgress } = useViewportScroll()
    return < motion.div style={{ scaleX: scrollYProgress }} />
    }

• Orchestration

  • 기본적으로 모든 애니메이션은 동시에 시작됩니다. 그러나 variants를 사용하면 when, delayChldren, sttagerChildren과 같은 prop들을 사용할 수 있습니다.

  • -delayChildren: 딜레이 시간 후에 하위 애니메이션이 시작됩니다.

  • staggerChildren: 하위 컴포넌트의 애니메이션에 지속 시간(초)만큼 시차를 둘 수 있습니다. 예를 들어, staggerChildren이 0.01이면 첫 번째 자식은 0초, 두 번째 자식은 0.01초, 세 번째 자식은 0.02초 지연되는 식입니다.