Framer Motion

옛슬·2022년 1월 16일

REACT 🔵

목록 보기

14/16

Framer Motion의 공식문서를 읽고, 정리하는 개념으로 적는 글입니다.
혹시라도 오타가 있는 경우 말씀해주세요 🏃‍♀️🚶‍♂️

Settings

Framer Motion을 다운로드 받는다
사용하기 위해서는 상단에 import { motion } from 'framer-motion';
motion을 불러와야 한다.

Simple Animation

Animate

<motion.div animate={{ x: 100 }} />

framer motion을 사용하고자 하는 태그 앞에 motion.을 적어준다.
animate prop을 사용하여 다양한 애니메이션을 넣을 수 있음.

Transition

공식문서

<motion.div
  animate={{ x: 100 }}
  1️⃣ transition={{ ease: "easeOut", duration: 2 }}
  2️⃣ transition={{ type: "spring", stiffness: 100 }}
  3️⃣ transition={{ yoyo: infinity | 10  }}
/>

Transitions prop을 사용하여 애니메이션을 자연스럽게 할 수 있다.
1. transition prop의 기본 형태
1. type을 통해 애니메이션 타입을 설정가능 : Tween Spring Inertia
  spring의 경우 stiffness으로 추가 설정 가능 (스프링의 강도)
1. yoyo 속성을 통해 변경되는 사항을 여러번 반복하여 나타낼 수 있다.
  숫자를 입력시 반복하는 횟수이며, infinity입력 시 무한대로 애니메이션을 반복한다.

Mount animations

<motion.div animate={{ x: 100 }} initial={false} />

initial={false} 입력 시, 처음에만 애니메이션이 동작되도록 설정할 수 있다.

Keyframes

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)

애니메이션을 키프레임화 할 수 있다.
만약에 current value를 입력하고 싶을 시 null을 입력하면 된다.

Variants

Variants are sets of pre-defined target objects.

const sayHello = {
  visible: { opacity: 1 },
  hidden: { opacity: 0 },
}

<motion.div
  initial="hidden"
  animate="visible"
  variants={sayHello}
/>

🌟 어떻게 사용하는지 제대로 보여지도록 sayHello라는 이상한 변수 이름을 줘봤다.
1. 태그 밖에 모션에 관련된 여러 속성을 넣은 객체를 만든다. 👉 sayHello 객체
2. 해당 모션 컴포넌트를 variants prop을 통해 전달하여 사용할 수있게 함.
3. 그 후 원하는 부분에 해당 객체의 key를 string의 형태로 입력하면 사용할 수 있게 됨 (이미 variants prop을 통해 컴포넌트를 전달해줬기 때문에 사용할 수 있음)

Propagation

const list = {
  visible: { opacity: 1 },
  hidden: { opacity: 0 },
}

const item = { // 참고로 item은 해당 값을 사용한다!
  visible: { opacity: 1, x: 0 },
  hidden: { opacity: 0, x: -100 },
}

return (
  <motion.ul
    initial="hidden"
    animate="visible"
    variants={list}
  >
    <motion.li variants={item} />
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ul>
)

만약에 부모와 자식이 똑같은 이름의 initial, animate 값을 가지고 있으면 자식에는 해당 속성의 값을 적지 않아도 전달이 된다.
즉 item variants를 가진 li는 ul의 animate 과 variants prop 값을 보고 값을 사용한다.

Orchestration

기본적으로 모든 애니메이션은 delay같은 속성을 추가하지 않는이상 모두 같은 시간에 시작한다. 하지만 variants prop을 사용하게 되면 transition에 새로운 속성을 사용할 수 있다

when delayChildren staggerChildren

해당 속성은 transition 속성 안에서 사용할 수 있고, parent에 사용할 수 있음.
when은 시기를 선택할 수 있다. → "beforeChildren" "afterChildren"
staggerChildren은 자식을 순서대로 애니메이션 할 수 있게 만들어 준다.
staggerChildren: 0.4 : 각 children component는 0.4초마다 애니메이션이 진행된다.

Gestures

Animation helpers

motion 컴포넌트는 다양한 제스처 애니메이션 prop을 가지고 있다.
whileHover, whileTap, whileFocus, whileDrag,whileInView

Hover

whileHover 외에도 onHoverStart와 onHoverEnd라는 콜백함수를 가지고 있음.

Props

// As values
<motion.div initial={{ opacity: 1 }} />

// As variant
<motion.div initial="visible" variants={variants} />

// Multiple variants
<motion.div initial={["visible", "active"]} variants={variants} />

// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />

1. As values : 각 속성의 초기값을 입력할 수 있다.
1. As variant :
1. Multiple variants :
1. As false : 애니메이션 마운팅하는 것을 무력하게 한다.