motiondivision/motion

어떤 프로젝트인가요?

핵심 기능

• 01선언형 React 컴포넌트와 일반 JavaScript animate 함수.
• 02스프링 물리, 제스처와 레이아웃 전환.
• 03스크롤 연동 효과와 타임라인.
• 04motion-v 패키지를 통한 Vue 지원.
• 05TypeScript 타입과 트리 셰이킹 가능한 빌드.

활용 사례

• React 컴포넌트 인터페이스에 진입, 종료, 호버 애니메이션 추가.
• 레이아웃에서 위치나 크기가 바뀌는 요소에 애니메이션 적용.
• 마케팅 페이지나 랜딩 페이지에 스크롤 기반 효과 구현.
• 저수준 애니메이션 코드를 작성하지 않고 Vue 애플리케이션에 모션 추가.

빠른 시작

1. 1

   Motion for React 또는 JavaScript 설치

   npm install motion
2. 2

   Motion for Vue 설치

   npm install motion-v
3. 3

   React 컴포넌트 가져와서 사용하기

사용 전 알아둘 점

• !Framer Motion의 이름이 Motion으로 변경되었으므로, 기존 framer-motion 가져오기를 motion/react로 업데이트해야 합니다.

토픽

자주 묻는 질문

motion은(는) 무엇인가요?

JavaScript, React, Vue용 오픈소스 애니메이션 라이브러리로, 스프링, 제스처, 레이아웃 전환과 스크롤 연동 효과를 제공합니다. Motion은 JavaScript용 애니메이션 라이브러리이며, React와 Vue 전용 패키지도 제공합니다. React 패키지는 motion/react에서 가져오고, 핵심 JavaScript 패키지는 선택자 또는 요소와 대상 값 집합을 받는 animate 함수를 제공합니다.

motion은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

motion은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

motion은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. motion의 마지막 커밋은 2026년 11월 5일입니다.

motion은(는) 어디에 사용할 수 있나요?

React 컴포넌트 인터페이스에 진입, 종료, 호버 애니메이션 추가. 레이아웃에서 위치나 크기가 바뀌는 요소에 애니메이션 적용. 마케팅 페이지나 랜딩 페이지에 스크롤 기반 효과 구현. 저수준 애니메이션 코드를 작성하지 않고 Vue 애플리케이션에 모션 추가.

motion는 어떻게 설치하나요?

Motion for React 또는 JavaScript 설치: npm install motion Motion for Vue 설치: npm install motion-v React 컴포넌트 가져와서 사용하기

motion은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/motiondivision/motion