Frammer

Framer is a tool built for interactive design. Backed by React, technical users can extend anything through code.

Installation

npm install framer-motion

Importing

import { motion } from "framer-motion"

사용해보기

Scale

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

export default function Scale() {
  return (
    <motion.div
      style={{
        backgroundColor: "pink",
        height: 100,
        width: 100
      }}
      animate={{ scale: 2 }}
      transition={{ duration: 0.5 }}
    />
  );
}

Keyframes

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

export default function Keyframes() {
  return (
    <motion.div
    style={{
      backgroundColor: 'blue',
      height: 100,
      width: 100,
    }}
      animate={{
        scale: [1, 2, 2, 1, 1],
        rotate: [0, 0, 270, 270, 0],
        borderRadius: ["20%", "28%", "50%", "50%", "20%"]
      }}
    />
  );
}

Gesture

import React from "react";
import Scale from "../FramerMotion/Scale";
import Keyframes from "../FramerMotion/Keyframes";
import Gesture from "../FramerMotion/Gesture";

export default function Example() {
  return (
    <>
      <div style={{ position: "absolute", top: 300, left: 300 }}>
        <Scale />
      </div>
      <div style={{ position: "absolute", top: 500, left: 500 }}>
        <Keyframes />
      </div>
      <div style={{ position: "absolute", top: 250, left: 600 }}>
        <Gesture />
      </div>
    </>
  );
}

Drag

import { motion } from "framer-motion"

export default function Drag() {
  <motion.div
    drag
    dragConstraints={{
      top: -50,
      left: -50,
      right: 50,
      bottom: 50,
    }}
  />
}

더 많은 애니메이션 예시가 있지만 나머지는 다음에 프로젝트에 적용할 때 더 알아보자!!