motion-vue - GitLite

KO | EN

gitlite — search

#javascript #ai #go #golang #android #machine-learning #nodejs #java #cli #kubernetes #awesome-list #security #pytorch #openai

motion-vue

(★ 2,194)

Motion for Vue

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - feature_request.md
- - e2e.yaml
  - release.yaml
  - test.yaml
- FUNDING.yml
- - 0001-parity-policy.md
- - architecture.md
  - domain.md
  - issue-tracker.md
  - triage-labels.md
- - package.json
  - README.md
  - tsconfig.json
  - vite.config.ts
  - vitest.config.ts
- - build.config.ts
  - package.json
  - tsconfig.json
- - .gitignore
  - MyTransition.vue
  - nuxt.config.ts
  - package.json
  - README.md
  - tailwind.config.js
  - tsconfig.json
- - components.d.ts
  - index.html
  - package.json
  - playwright.config.ts
  - postcss.config.js
  - tailwind.config.js
  - tsconfig.json
  - tsconfig.node.json
  - vite.config.ts
- animate-presence.spec.ts
- drag-constraints-animation.spec.ts
- drag-scroll-while-drag.spec.ts
- drag-snap-to-origin.spec.ts
- group-animatepresence.spec.ts
- layout-mount.spec.ts
- preset-directive.spec.ts
- reorder-auto-scroll.spec.ts
- reorder-page-scroll.spec.ts
- reorder.spec.ts
- useScroll.spec.ts
- utils.ts
- v-show-shared-layout.spec.ts
- variant.spec.ts
.gitignore
CHANGELOG.md
CLAUDE.md
commitlint.config.js
CONTEXT.md
CONTRIBUTING.md
eslint.config.mjs
LICENSE
package.json
playwright.config.ts
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
skills-lock.json
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/motiondivision/motion-vue

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd motion-vue

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install motion-v

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

<img src="https://img.shields.io/npm/v/motion-v.svg?style=flat-square" />

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for Vue</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
    <img src="https://img.shields.io/npm/v/motion-v.svg?style=flat-square" />
  </a>
  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
  <img src="https://img.shields.io/npm/dm/motion-v.svg?style=flat-square" />
  </a>
  <a href="https://twitter.com/motiondotdev" target="_blank">
  <img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow"  />
  </a>
</p>

<br>
<hr>
<br>

Motion for Vue is an open source, production-ready library that’s designed for all creative developers.

It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.

It looks like this:

```jsx
<motion.div :animate="{ x: 100 }" />
```

It does all this:

- Springs
- Keyframes
- Layout animations
- Shared layout animations
- Gestures (drag/tap/hover)
- Scroll animations
- SVG paths
- Exit animations
- Server-side rendering
- Independent transforms
- Orchestrate animations across components
- CSS variables

...and a whole lot more.

## Get started

### 🐇 Quick start

Install `motion-v` via your package manager:

```
npm install motion-v
```

Then import the `motion` component:

```vue
<script setup>
import { motion } from 'motion-v'
</script>

<template>
  <motion.div :animate="{ x: 100 }" />
</template>
```

## ⚡️ Motion+

Learn, Design, Build. [Motion+](https://motion.dev/plus) is a one-time fee, lifetime update membership that provides:
- 160+ premium Motion Examples
- Motion UI features like Cursor and Ticker
- Motion Studio animation editing for VS Code `alpha`
- Early access content
- Private Discord

[Get Motion+](https://motion.dev/plus)

## 🎨 Studio

![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)

Motion Studio is a versatile suite of developer tools allowing you to:

-   Visually edit CSS and Motion easing curves in VS Code
-   Generate CSS springs with LLMs
-   Load Motion docs into your LLM

Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).

### 💎 Contribute

- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion-vue/blob/master/CONTRIBUTING.md) has you covered.
- [Join our discord ](https://discord.com/invite/dCBuRgdNDG)

### 👩🏻‍⚖️ License

- Motion for Vue is MIT licensed.

## ✨ Sponsors

Motion is sustainable thanks to the kind support of its sponsors.

### Partners

#### Framer

Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.

<a href="https://www.framer.com?utm_source=motion-readme">
  <img alt="Framer" src="https://github.com/user-attachments/assets/0404c7a1-c29d-4785-89ae-aae315f3c759" width="300px" height="200px">
</a>

### Platinum

<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>

### Gold

<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/1d5f2571-8bc3-4367-9fec-14d291168ff0" width="200px" height="120px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/33d1cb98-238a-4eed-a0df-9c7ab097d65b" width="200px" height="120px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="200px" height="120px"></a> <a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/abc473bd-07ae-4a7d-9833-efe9dadb3773" width="200px" height="120px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/ac282433-6adb-4ad2-9fd2-5c6ee513c14b" width="200px" height="120px"></a> <a href="https://notion.com"><img alt="Notion" src="https://github.com/user-attachments/assets/a27a6033-3cb0-4232-a6bb-625e1824517b" width="200px" height="120px"></a>

### Silver

<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/f16e3eb9-f0bd-4ad1-8049-f079a3d65c69" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/2c44e7f4-5c2a-4714-9050-1570538665ff" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/e32205a7-3ab1-41ec-8729-a794058fd655" width="150px" height="100px"></a> <a href="https://bolt.new"><img alt="Bolt.new" src="https://github.com/user-attachments/assets/7932d4b2-bb6c-422e-82b9-6ad78a7e3090" width="150px" height="100px"></a>

### Personal sponsors

-   [OlegWock](https://sinja.io)
-   [Lambert Weller](https://github.com/l-mbert)
-   [Jake LeBoeuf](https://jklb.wf)
-   [Han Lee](https://github.com/hahnlee)