React JS / Typescript / framer-motion

React 라이브러리 중 "framer-motion" 라는 오픈소스가 존재하며, 다양한 애니메이션 효과를 간편하게 사용가능하다.

npm i framer-motion

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

Documentation | Framer for Developers

 

다음과 같이 import 하여 motion, AnimatePresence 등을 사용할 수 있다.

import { motion, AnimatePresence } from "framer-motion";

 

위 링크에서 API Documentation에 자세한 내용이 있으며, React에서 styled-components와 같이 활용하기 위해서는 다음과 같이 styled(motion.div) 로 작성을 해야 motion 효과를 적용할 수 있다.

const Wrapper = styled(motion.div)`
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 215, 70);
`;