39. [after final project] Gnims 개선 - 리액트 framer-motion 라이브러리로 애니메이션효과 넣기

 

내가 만든 스케쥴 디테일페이지에 이런 피드백이 있었다. 이미 끝난 프로젝트이지만 프로젝트 기간내에 다 하지 못했어도 추가적으로 디벨롭을 시키고싶었다!

최종 프로젝튼데 애니메이션효과정돈 넣어줘야하지 않겠수?

 

Framer 사이트 완전 예쁨

https://www.framer.com/?utm_source=motion-readme 

Framer — Design and ship your dream site. Zero code, maximum speed.

공식 문서

https://www.framer.com/motion/

---

 

yarn add framer-motion

먼저 라이브러리를 설치하고, 

import { motion } from "framer-motion";

import 는 이렇게 한줄이면 끝

 

태그 앞에 motion. 을 붙여준다. 이렇게 motion이 붙은 키워드를 motion component라고 부름.

 

초기 상태 initial속성을 객체 형태로 넣고, 애니메이션효과를 넣을 상태를 animate속성에 객체형태로 넣음.

 

<motion.div
  initial={{ opacity: 0, scale: 0.5 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{
    duration: 0.8,
    delay: 0.5,
    ease: [0, 0.71, 0.2, 1.01]
  }}
/>

형태가 스윽 커지는 애니메이션효과이다. 메인페이지 카드에 넣으면 좋겠다싶어서 메인스케쥴카드에 적용시켜봤다. 

 

그리고 호버시에 띠용하는 스피링효과도 넣어보았다. 

<motion.div
      initial={{ opacity: 0, scale: 0.2 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{
        duration: 0.8,
        delay: 0.5,
        ease: [0, 0.71, 0.2, 1.01],
      }}
      whileHover={{ scale: 1.1, transition: { type: "spring", stiffness: 400, damping: 10 } }}
      whileTap={{ scale: 1.1 }}
    >

그리고 케밥모달이 자연스럽게 올라오는 애니메이션효과를 넣은 코드는 다음과 같다.

  const list = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
  };
  const item = {
    hidden: { opacity: 0, y: 100 },
    visible: { opacity: 1, y: 0 },
  };
  
  ...
  
<motion.div
        variants={list}
        initial="hidden"
        animate="visible"
        className="h-full w-[375px] bg-black bg-opacity-50  justify-center fixed bottom-0 z-10 flex"
      >
      ...
      <motion.div variants={item} className=" bottom-0 w-[375px] h-[205px] rounded-t-lg bg-white fixed ">

 

화면 기록 2023-03-16 오후 10.11.51.mov

6.34MB

고민 해결!

 

참고한 블로그

https://nykim.work/114

Framer-motion 라이브러리 훑어보기