Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oku-ui/motion
Motion One for Vue is a 5kb animation library for Vue 3 and Nuxt 3. Built on Motion One, it's capable of springs, independent transforms, and hardware accelerated animations.
https://github.com/oku-ui/motion
motion motion-nuxt motion-vue motionone
Last synced: 29 days ago
JSON representation
Motion One for Vue is a 5kb animation library for Vue 3 and Nuxt 3. Built on Motion One, it's capable of springs, independent transforms, and hardware accelerated animations.
- Host: GitHub
- URL: https://github.com/oku-ui/motion
- Owner: oku-ui
- License: mit
- Created: 2024-01-03T10:08:01.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-01T07:57:27.000Z (2 months ago)
- Last Synced: 2024-09-29T01:22:45.148Z (about 1 month ago)
- Topics: motion, motion-nuxt, motion-vue, motionone
- Language: Vue
- Homepage: https://motion.oku-ui.com
- Size: 3.25 MB
- Stars: 190
- Watchers: 1
- Forks: 4
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue and Nuxt Motion One
| Package | Version | Downloads |
|---------|---------|-----------|
| [Vue](https://www.npmjs.com/package/@oku-ui/motion) | [](https://www.npmjs.com/package/@oku-ui/motion) | [](https://www.npmjs.com/package/@oku-ui/motion) |
| [Nuxt](https://www.npmjs.com/package/@oku-ui/motion-nuxt) | [](https://www.npmjs.com/package/@oku-ui/motion-nuxt) | [](https://www.npmjs.com/package/@oku-ui/motion-nuxt) |
**A tiny, performant animation library for VueJS. Powered by [Motion One](https://motion.dev/).**
## Introduction
Motion One for Vue is a 5kb animation library for Vue 3. Built on Motion One, it's capable of springs, independent transforms, and hardware accelerated animations.
By the end of this quick guide, you'll have installed Motion One for Vue and created your first animation.
## Installation
Motion One for VueJS can be installed via npm:
```bash
npm install @oku-ui/motion
# or
pnpm add @oku-ui/motion
# or
yarn add @oku-ui/motion
```
Motion One for NuxtJS can be installed via npm:
```bash
npm install @oku-ui/motion-nuxt
# or
pnpm add @oku-ui/motion-nuxt
# or
yarn add @oku-ui/motion-nuxt
```
## NuxtJS
Add `@oku-ui/motion-nuxt` to the `modules` section of `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
modules: [
'@oku-ui/motion-nuxt',
],
motion: {
// autoImportComponents?: boolean
// prefix?: string
},
})
```
## Create an animation
Import the Motion component and register it in your Vue component:
```ts
import { Motion } from "@oku-ui/motion"
```
The `Motion` component can be used to create an animatable HTML or SVG element. By default, it will render a `div` element:
```ts
import { Motion } from "motion/vue"
div {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: var(--splash);
}
```
Edit the above example by adding an animate prop:
```ts
```
Every time a value in animate changes, perhaps from component data or props, the component will automatically animate to the latest values.
## Transition options
We can change the type of animation used by passing a `transition` prop.
```ts
```
By default transition options are applied to all values, but we can also override on a per-value basis:
```ts
```
## Keyframes
Values can also be set as arrays, to define a series of keyframes.
```ts
```
By default, keyframes are spaced evenly throughout `duration`, but this can be adjusted by providing progress values to `offset`:
```ts
```
## Enter animations
Elements will automatically `animate` to the values defined in animate when they're created.
This can be disabled by setting the `initial` prop to `false`. The styles defined in `animate` will be applied immediately when the element is first created.
```ts
```
## Exit animations
When an element is removed with `v-show` or `v-if` it can be animated out with the Presence component and the exit prop:
```ts
import { Motion, Presence } from "motion/vue"
const show = ref(true)
Toggle
.container {
width: 100px;
height: 150px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.container button {
cursor: pointer;
}
.box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: var(--splash);
}
```
`exit` can be provided a `transition` of its own, that override the component's `transition`:
```ts
```