Framer Motion15 Framer motion: keyframes에 대해 알아보자 CSS의 keyframes와 유사한 방식으로 framer motion에서도 keyframes 기능을 사용할 수 있다. animate 값의 배열을 설정하여 여러 단계의 애니메이션을 정의할 수 있다. 기본적으로 각 keyframe은 균등한 시간 동안 시행되지만, times를 사용하면 설정하는 시간에 맞춰 애니메이션이 동작할 수 있도록 할 수 있다.animate = {{ CSS속성명 : [값1, 값2, 값3 ... ] }} transition = {{ times : [0, 값1, 값2, 값3, ... , 1 ]}}import { motion } from "framer-motion";export default function Comp01() { return ( Framer.. 2024. 9. 24. Framer motion : Transition 속성 종류에 대해 알아보자 Framer motion의 transition의 경우에는 css 속성 중 transition과 관련된 별도의 속성이 사용된다.속성설명duration애니메이션이 지속되는 시간 설정 (단위 : 초)delay애니메이션이 시작되기 전에 지연되는 시간 설정 (단위 : 초)ease애니메이션의 시간 흐름에 따른 매개변수의 변화율(easing함수)를 설정* 기본값 : easeInOut | linear | easeIn | easeOut | easeInOuttype애니메이션의 유형을 설정 *기본값 : spring | tween | inertia stiffness스프링애니메이션의 강성(물체가 변형에 저항하려는 성질)을 설정damping스프링애니메이션의 감쇠(물체의 운동을 저지시키려는 힘)를 설정mass스프링애니메이션의 질.. 2024. 9. 24. Framer Motion 시작하기 Documentation | Framer for Developers Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com Framer Motion은 React에서 애니메이션과 상호작용을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 위의 사이트에서 다양한 예제를 확인할 수 있다. Framer Motion 시작하기 Framer motion을 사용하기 위해서 우선 설치가 필요하다.npm install framer-motion --save 1. framer-motion 에서 motion을 받아온다.import { motion } from "fra.. 2024. 9. 24. 이전 1 2 3 다음