패스트캠퍼스 챌린지 11일차 (Framer Motion)

2022.2.3 (목) +11days

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

Framer는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌를 제공하는 라이브러리이다.

아래는 공식문서에서 제공하는 기본 설치 방법과 몇몇 중요한 강의에서 언급하는 몇몇 중요한 코드 예제들만 작성했다.

 

Installation

npm install framer-motion

Importing

import { motion } from "framer-motion"

Example

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

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

Keyframes

Set a value as an array and Motion will animate through each of these values in turn.

By default, each keyframe will be spaced evenly throughout the animation, but the exact timing and easing can be configured via the transition property.

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)

Variants

Variants are pre-defined visual states that a component can be in. By giving a component and its children variants with matching names, whole React trees can be animated by changing a single prop.

By using variants, a parent can easily orchestrate the animations of its children with special transition props like staggerChildren.

Variants can also be dynamic functions that return different props based on data passed to each component's custom prop.

import { motion } from "framer-motion"

const variants = {
  open: { opacity: 1, x: 0 },
  closed: { opacity: 0, x: "-100%" },
}

export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <motion.nav
      animate={isOpen ? "open" : "closed"}
      variants={variants}
    >
      <Toggle onClick={() => setIsOpen(isOpen => !isOpen)} />
      <Items />
    </motion.nav>
  )
}

Gesture animations

Motion provides whileHover, whileTap, whileDrag and whileFocus helper props, that will temporarily animate a component to a visual state while a gesture is active.

Like animate, these can either be set as an object of properties (each with their own transition prop), or the name of a variant.

Motion will also automatically handle the interplay of the two gestures, so if a component is being pressed while a hover gestures starts/stops, the whileTap gesture will take priority.

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.button
    whileHover={{ scale: 1.1 }}
    whileTap={{ scale: 0.9 }}
  />
)

Drag

A component can be made draggable with the addition of the drag prop. Lock it to either axis by setting drag to "x" or "y".

The component can be constrained to a specific range, defined either in pixels, or by providing a ref to another DOM element.

These constraints are elastic, and the strength of this elasticity can be configured with the dragElastic prop.

import { motion } from "framer-motion"

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

MotionValues

Motion uses MotionValues to track the state and velocity of every animating value.

By making MotionValues yourself, you can create declarative chains of values that map from one into the other.

import {
  motion,
  useMotionValue,
  useTransform,
} from "framer-motion"

export const MyComponent = () => {
  const x = useMotionValue(0)
  const background = useTransform(
    x,
    [-100, 0, 100],
    ["#ff008c", "#7700ff", "rgb(230, 255, 0)"]
  )

  return (
    <motion.div style={{ background }}>
      <motion.div
        drag="x"
        dragConstraints={{ left: 0, right: 0 }}
        style={{ x }}
      >
        <Icon x={x} />
      </motion.div>
    </motion.div>
  )
}

Exit animations

In React, it's usually difficult to animate components once they've been removed from the DOM.

By wrapping motion components with AnimatePresence, they gain the use of an exit property that can define either a set of values or a variant name to animate to before being removed.

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

export const Slideshow = ({ image }) => (
  <AnimatePresence>
    <motion.img
      key={image.src}
      src={image.src}
      initial={{ opacity: 0, y: 200 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  </AnimatePresence>
)

 

정리

Framer ⇒ Design + Frontend Tool

Motion ⇒ Animation 기능이 들어간 Component

Variants ⇒ Propagation / Orchestration

Gestures / MotionValue ⇒ 편의 기능들 제공

 

 

 

 

 

2022.2.3 +11days

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다