Framer 애니메이션 배우기

https://www.framer.com/docs/introduction/

Introduction | Framer for Developers

 

리액트에서는 애니메이션 구현방법이 여러가지이이다. 그중에서 가장 많이 쓰는 Framer에 대해 배워보도록 하겠다.

 

(본 내용은 위 사이트를 번역한 내용임)

 

 

1. Overview, 프레이머 간단히 둘러보기

 

먼저 프레이머가 어떻게 돌아가는지, 어떤 기능들이 있는지 살펴보자. 그리고 각각의 자세한 내용은 후반부에 설명하겠다.

 

<motion/> 컴포넌트

프레이머에서는 애니메이션을 하기 위해서 기존 DOM 요소들에 motion을 붙여서 사용한다

즉 만약 내가 <div>에 애니메이션을 주고싶다! 하면 아래처럼 <motion.div>를 사용해야 된다

 

import { motion } from "framer-motion";

<motion.div />

 

어랏. StyledComponent는 그럼 어떻게 적용하나요?

아래처럼 styled로 컴포넌트를 묶어주면 된다. 프레이머 컴포넌트에 styled component를 적용해준 모습

const VideoView = styled(motion.video)`
  width: 100%;
  height: 100%;
`;

 

 

 

 

 

Animation 주는법

모션 컴포넌트에 애니메이션을 주는법은 간단하다. 컴포넌트에 prop으로 animate 값을 전달해주면 된다.

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

그리고 이 값을 변화시키면 프레이머에서 알아서 애니메이션을 적용해준다!

 

 

아래 예제를 링크를 들어가서 x,y,rotate값을 변화시켜보면 애니메이션이 자동으로 적용되는것을 확인 할 수 있다.

flexible transition prop

Transition | Framer for Developers

 

 

 

Variant

variant란 미리 정의된 애니메이션의 모음이다. 처음에 animate에 들어갈 값을 따로 객체로 빼놓는거랑 뭐가 다르지 라고 생각했었는데... 크게 다르지 않다. 다만 미리 정의된 객체에 tag값을 붙여주는게 Variant라고 생각하면 편하다.

 

아래 예제에서는 variant로 visible과 hidden이라는 태그를 만들고 그 태그에 애니메이션에 들어갈 값을 정의해 주었다.

그리고 animate prop에서 태그값을 넣어주면 알아서 variant에서 맞는 태그값에 따른 애니메이션을 실행시켜준다.

 

 

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


const [isVisible, setIsVisible] = useState();

<motion.div
  initial="hidden"
  animate= isVisible ? "visible" : "hidden"
  variants={variants}
/>

initial값은 컴포넌트의 초기 css값이다. 그리고 animate의 값과 비교하여 값이 다르다면 애니메이션을 진행한다.

여기서 궁금증, initial값을 넣어주고 animate에 아무것도 안넣어주면? 아무일도 일어나지 않는다.

 

 

 

 

 

Gesture 감지

프레이머는 강력한 Gesture 기능을 지원한다. whileHover, whileTap, whileFocus, whileDrag and whileInView 등이 있다.

<motion.button
  initial={{ opacity: 0.6 }}
  whileHover={{
    scale: 1.2,
    transition: { duration: 1 },
  }}
  whileTap={{ scale: 0.9 }}
  whileInView={{ opacity: 1 }}
/>