1. Framer Motion
2. motion props
① props: animate
② props: initial
③ props: transition
3. Variants
① Variants의 정의
② Variants 예제, Part 1
③ Orchestration
④ Variants 예제, Part 2
4. Drag
1. Framer Motion
Framer Motion은 React에서 Animation 효과들을 쉽게 구현할 수 있게 해주는 라이브러리로
아래 이미지처럼 Netflix 같은 데에서 사용되는 멋진 Animation 효과들을 구현할 수 있다.
framer-motion 라이브러리는 아래 명령어를 입력해서 설치할 수 있다.
npm install framer-motionframer-motion의 모든 기능들은 기본적으로 motion 컴포넌트 안에서 동작한다.
이러한 motion 컴포넌트는 객체 속성에 접근할 때 사용하는 점 표기법을 활용해서 생성할 수 있다.
import {motion} from "framer-motion";
function MyComponent(){
return (
<div>
<motion.div></motion.div>
</div>
);
};추가적으로 기존에 만들어둔 styled-components를 <motion /> 컴포넌트로 바꾸고 싶은 경우에는
styled() 함수를 통해서 기존 styled-components를 <motion /> 컴포넌트로 바꿀 수 있다.
import {styled} from "styled-components";
import {motion} from "framer-motion";
const Wrapper = styled.div``;
//const Box = styled.div``;
const Box = styled(motion.div)``;
function MyComponents(){
return (
<Wrapper>
<Box />
</Wrapper>
);
}2. motion props
앞에서 framer-motion의 설치, motion 컴포넌트 생성하는 방법을 배웠다.
이제 본격적으로 framer-motion을 사용해보자.
① Animation / 'animate' props
framer-motion의 모든 Animation은 motion 컴포넌트의 animate 속성을 통해 제어된다.
그리 복잡하지 않은 간단한 애니메이션 효과 같은 경우는 animate props에서 직접 설정할 수 있다.
import {styled} from "styled-components";
import {motion} from "framer-motion";
function Exam(){
return (
<Wrapper>
<Box
animate={{
rotateZ: 360,
transition: {
delay: 1.0,
duration: 1.0
}
}}
/>
</Wrapper>
);
};
② props: initial
initial은 애니메이션 효과가 시작하는 방식을 지정하는 <motion />의 props이다.
<motion /> 컴포넌트가 처음 랜더링될 때의 상태를 명시한다.
import {styled} from "styled-components";
import {motion} from "framer-motion";
function Exam(){
return (
<Wrapper>
<Box
animate={{
scale: 1.0,
rotateZ: 360,
transition: {
delay: 1.0,
duration: 0.4
}
}}
initial={{
scale: 0
}}
/>
</Wrapper>
);
};
③ props: transition
transition은 애니메이션 효과가 진행되는 형식을 지정하는 <motion />의 props이다.
'type', 'delay', 'duration' 등 다양한 설정을 하는 것이 가능하다.
(1). type
- 애니메이션 효과의 타입, 형식을 지정
- tween, spring, Inertia 세 가지 타입을 사용할 수 있다.
- tween: 기본 값 (between의 약어), 기본적인 CSS 애니메이션 형식에 가깝다.
spring: 애니메이션 효과가 끝날 때, 약간의 탄성을 가지게 하는 형식
inertia: 관성과 관련이 있는 효과
(2). delay
- 지정한 시간이 지나고 나서 애니메이션 효과를 실행시킨다.
- 'delay: 1.0'으로 설정하면, 약 1초 뒤에 애니메이션 효과가 실행된다.
(3). duration
- 애니메이션 효과가 시작하고 끝나는 데 걸리는 시간을 지정한다.
위의 이미지 2개는 약 2초 뒤에 박스가 커지는 간단한 예제의 실행 모습이다.
하나는 type: "tween"으로 다른 하나는 type: "spring"으로 설정한 것이다.
tween은 기본적인 CSS 애니메이션에 가깝기 때문에, 약 2초 뒤에 평범하게 박스가 커지지만
spring 같은 경우에는 약 2초 뒤에 박스가 커지는 것은 같지만
커진 이후에 약간의 탄성 비슷한 효과나 발생하는 것을 확인할 수 있다.
//transition props 예제
function Exam(){
return (
<Wrapper>
<Box
initial={{scale: 1.0}}
animate={{
scale: 2.0
}}
transition={{
type: "tween"
//type: "spring"
delay: 2.0
}}
/>
</Wrapper>
);
}3. Variants
① Variants의 정의
Variants란 컴포넌트가 가질 수 있는 미리 정의된 시각적 state로
<motion /> 컴포넌트에서 사용할 애니메이션 state를 미리 정의하는 게 가능하다.
쉽게 이야기하자면, 여러 <motion /> 컴포넌트에서 사용하기 위해 만들어두는
일종의 공통 애니메이션 관련 설정 모음집이라고 생각하면 될 것이다.
//Variants Sample
const BoxVariant = {
start: { scale: 0 },
end: {
scale: 1.5,
rotateZ: 360,
transition: {
type: "spring",
delay: 2,
duration: 1
}
}
};
이런 식으로 만들어둔 Variants는 <motion /> 컴포넌트의 variants 속성을 통해 불러올 수 있다.
//Variants 예제
const BoxVariants = {/*...*/}
function Exam(){
return (
<Wrapper>
<Box
variants={BoxVariants}
initial="start"
animate={BoxVariants.end}
/>
</Wrapper>
);
}
② Varianst 예제, Part 1
앞에서 Variants를 만들고 사용하는 것까지 해봤으니, 다른 예제를 통해 숙달해 보자.
이런 식으로 정사각형이 먼저 나오고, 그 뒤에 원 4개가 순차적으로 나오는 예제를 구현해 볼 것이다.
▼ CSS Style Setting
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, rgb(174, 188, 244), rgb(8, 62, 171));
`;
const Box = styled(motion.div)`
width: 200px;
height: 200px;
background-color: rgba(220, 220, 220, 0.7);
border-radius: 15px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
display: grid;
grid-template-columns: repeat(2, 1fr);
`;
const Circle = styled(motion.div)`
background-color: rgb(250, 250, 250);
width: 72px;
height: 72px;
border-radius: 35px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
place-self: center;
`;<Box />, 4개의 <Circle /> 컴포넌트에 전달할 Variants를 아래와 같이 작성하고
이를 <motion /> 컴포넌트의 variants 속성에 전달해서 애니메이션 효과를 적용시켰다.
//Variants 예제 2
const Wrapper = styled.div`...`;
const Box = styled(motion.div)`...`;
const Circle = styled(motion.div)`...`;
const BoxVariants = {
start: { scale: 0 },
end: {
scale: 1,
transition: {
type: "spring",
delay: 1,
duration: 0.5,
bounce: 0.5
}
}
};
const CircleVariants = {
start: { scale: 0 },
end: {
scale: 1,
transition: {
type: "spring",
delay: 2,
duration: 0.1
}
}
};
function Exam(){
return (
<Wrapper>
<Box variants={BoxVariants} initial="start" animate="end">
<Circle variants={CircleVariants} />
<Circle variants={CircleVariants} />
<Circle variants={CircleVariants} />
<Circle variants={CircleVariants} />
</Box>
</Wrapper>
);
}
이때 <Box /> 컴포넌트에서만 initial과 animate 속성에 설정을 전달하고
<Circle /> 컴포넌트에는 initial과 animate props 설정을 하지 않았음에도
Variants로 설정한 애니메이션 효과가 정상적으로 적용된 것을 확인할 수 있다.
이는 <Box /> 컴포넌트에서 두 props에 전달한 값을 하위 요소인 <Circle />이 상속받았다는 점과
BoxVariants, CircleVariants의 key 값을 "start", "end"로 통일시켰기에 가능한 일이다.
이제 Framer Motion의 Orchestration이라는 기능을 이용해서
원 4개가 한 번에 나오던 것을 하나씩 순차적으로 나오도록 애니메이션 효과를 수정해 보자.
③ Orchestration
기본적으로 Framer Motion의 모든 애니메이션 효과는 부모, 자식 요소 상관없이 동시에 시작된다.
하지만 Variants를 사용한다면, transition에 'delayChildren', 'staggerChildren' 등을 추가할 수 있고
이를 통해서 애니메이션을 순차적으로 실행시키는 것이 가능하다.
쉽게 이야기하자면, 애니메이션 효과의 지휘자 같은 역할을 수행한다고 할 수 있다.
transition props에 추가 가능한 Orchestration은 다음과 같다.
const Variants = {
transition: {
delayChildren: 0.5,
//자식 요소의 delay를 일괄적으로 설정
staggerChildren: 0.5,
//자식 요소를 순차적으로 실행
staggerDirection: 1,
//staggerDirection: -1
//자식 요소가 실행될 순서를 정하는 속성
//1 => 정방향으로 실행
//-1 => 역방향으로 실행
when: "beforeChildren",
//when: "afterChildren"
//애니메이션이 시작할 시기를 설정 가능
}
}④ Variants 예제 2
이제 Orchestration을 이전 예제에 적용시켜서, 4개의 원이 순차적으로 나오게끔 해보자.
부모 요소인 Box의 Variants에서 delayChildren 속성을 통해서 각 자식 요소의 기본적인 Delay를 설정하고
staggerChildren 속성을 통해 각 자식 요소에 순차적인 Delay까지 적용하였다.
이를 통해서 처음 <Box />가 랜더링 되고, 이후에 <Circle /> 4개가 순차적으로 랜더링 된다.
//Variants 예제 2
const Wrapper = styled.div`...`;
const Box = styled(motion.div)`...`;
const Circle = styled(motion.div)`...`;
const BoxVariants = {
start: { scale: 0 },
end: {
scale: 1,
transition: {
type: "spring",
delay: 0.8, //delay: 1 → delay: 0.8
duration: 0.5,
bounce: 0.5,
//New
delayChildren: 1.2,
staggerChildren: 0.4
}
}
};
const CircleVariants = {
start: { scale: 0 },
end: {
scale: 1,
transition: {
type: "spring",
duration: 0.2,
//delay: 2
}
}
};
function Exam(){
return (
<Wrapper>
<Box variants={BoxVariants} initial="start" animate="end">
<Circle variants={CircleVariants} />
<Circle variants={CircleVariants} />
<Circle variants={CircleVariants} />
<Circle variants={CircleVariants} />
</Box>
</Wrapper>
);
}이 게시글은 NomadCoders의 React Masterclass 강의와 Framer Motion의 공식 문서를 보면서
공부했던 내용을 정리한 게시글입니다. 오타가 있다면 댓글로 남겨주세요.
💻 Update Log's
2024.01.01 Variants Part 1 정리 내용 추가
2024.01.04 Variants Part 2 정리 내용 추가