공식 참고 문서 : https://www.framer.com/docs/introduction/

Motion은 Framer의 React용 production-ready motion 라이브러리입니다. HTML 및 SVG 의미 체계를 유지하면서 선언적 애니메이션, 손쉬운 레이아웃 전환 및 제스처를 제공합니다.

설치

$ npm i framer-motion

사용방법

해당 element 태그에 애니메이션을 주기 위해서 지켜야할 규칙은 단 하나이다.

<div></div> 가 아닌 <motion.div></motion.div> 처럼 생성해 주어야 한다.

motion은 import { motion } from 'framer-motion' 에서 모듈명이다.

그렇다면 컴포넌트에 애니메이션 효과를 지정하는 방법은 무엇일까.

바로 styled-components 의 기능 중 scss의 @extend 의 처럼 사용된는 방법으로 적용할 수 있다.

*const Box = styled(motion.div)``;*

import styled from 'styled-components';
import { motion } from 'framer-motion';

const Box = styled(motion.div)`
**	width: 100px;
	height: 100px;
**`;

**function App() {
	return (
		<>
			<motion.div animate={{ x: 100 }} /> {/* 선언 방법 1 */}
			<Box animate={{ y: 100 }}></Box>    {/* 선언 방법 2 */}
		</>
	)
}

구성 요소의 애니메이션 상태는 JavaScript가 로드된 후 스타일이 변경된 콘텐츠의 플래시를 방지하기 위해 서버 측에서 렌더링됩니다. → Server-side rendering (SSR)