[react] framer motion 사용법

[react] framer motion 구현 예시

 

react faramer motion

라이브러리를 이용해

동적인 애니메이션을 구현합니다.

 

framer motion 설치

npm install framer-motion

 

framer motion 제공 기능

react에서 framer motion을 이용하여 디양한 애니메이션(transition, repeat, delay ), Gesture(hover, drag, tap) 등의 다양한 동적 무브먼트를  smooth하게 구현이 가능합니다.

 

기본 예

<motion.div
  animate={{
    x: 0,
    backgroundColor: "#000",
    boxShadow: "10px 10px 0 rgba(0, 0, 0, 0.2)",
    position: "fixed",
    transitionEnd: {
      display: "none",
    },
  }}
/>

 

사라지는 현상 구현 영상

 

사라지는 현상 구현

import React from "react";
import { motion } from "framer-motion"

const Example = () => {
    const variants = {
        hidden: { opacity: 0 },
        visible: { opacity: 1 },
    }

    return (
        <motion.div 
            initial="visible"
            animate="hidden"
            transition={{
                default: { duration: 2 },
            }}
            variants={variants}>
            <div>2초 후 사라지는 컴포넌트</div>
        </motion.div>
    );
};

export default Example;

 

framer motion 공식 문서

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

Documentation | Framer for Developers