[Framer-motion-3D]

Framer-motion-3D

R3F 공식 독스에서 추천중인 라이브러리
많은 커뮤니티와 호환성을 고려한 업데이트 진행중

사용방법
모션을 줄 mesh 혹은 group 에 접두사로 motion 붙이면 됨
initial (초기값) 설정
animate (애니메이션) 설정
transition (스피드, 딜레이와 같은 모션감) 설정

<motion.mesh
  initial={{ x: 0, y: -1, z: 2 }}
  animate={{
     x: 0,
     y: 1,
     z: 0,
     transition: { duration: 3, delay: 1, type: "spring" },
  }}>
  ...

선언식 애니메이션
여러 애니메이션을 정의해놓고 조건에 따라 해당되는 애니메이션을 넣어주면 됨

const variants = {
  initial: {
    rotateX: Math.PI / 2,
    rotateZ: 1,
  },
  animate: {
    rotateZ: [0, Math.PI],
    transition: { duration: 3, repeat: Infinity },
  },
  animate2: {
    rotateY: [Math.PI, 0],
    transition: { duration: 3, repeat: Infinity },
  },
};
<motion.mesh variants={variants} initial="initial" animate={조건 ? "animate" : "animate2"}>
  ...

---

기본 정의된 애니메이션

함수가 아닌 객체 e.g. {{ scale:[1,1.5] }}

whileHover
object 위에 hover 시 동작

whileTap
터치 기반 디바이스에서 화면을 손가락으로 두번 빠르게 누르는 동작