Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@oku-ui/motion
Advanced tools
@oku-ui/motion - npm Package Compare versions
Comparing version 0.4.0 to 0.4.1
| { | ||
| "name": "@oku-ui/motion", | ||
| "type": "module", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "private": false, | ||
@@ -34,3 +34,3 @@ "description": "A tiny, performant animation library for VueJS", | ||
| "types": "./dist/nuxt/index.d.mts", | ||
| "default": "./dist/nuxt/index.js" | ||
| "default": "./dist/nuxt/index.mjs" | ||
| }, | ||
@@ -87,3 +87,3 @@ "require": { | ||
| "@types/jsdom": "^21.1.7", | ||
| "@types/node": "^22.9.0", | ||
| "@types/node": "^22.9.1", | ||
| "@vitejs/plugin-vue": "^5.2.0", | ||
@@ -108,3 +108,3 @@ "@vitejs/plugin-vue-jsx": "^4.1.0", | ||
| "vue-tsc": "^2.1.10", | ||
| "@oku/tsconfig": "0.4.0" | ||
| "@oku/tsconfig": "0.4.1" | ||
| }, | ||
@@ -111,0 +111,0 @@ "publishConfig": { |
196
README.md
@@ -1,10 +0,14 @@ | ||
| # Vue and Nuxt Motion | ||
| # Oku Motion | ||
| | 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) | | ||
| **Unleash the Power of Animation in Your Vue Apps!** | ||
| **A tiny, performant animation library for VueJS. Powered by [Motion](https://motion.dev/).** | ||
| <p> | ||
| <a href="https://www.npmjs.com/package/@oku-ui/motion"><img src="https://img.shields.io/npm/v/@oku-ui/motion.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> | ||
| <a href="https://www.npmjs.com/package/@oku-ui/motion"><img src="https://img.shields.io/npm/dm/@oku-ui/motion.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a> | ||
| <a href="https://github.com/oku-ui/motion/tree/main/LICENSE"><img src="https://img.shields.io/github/license/nuxt/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="License"></a> | ||
| <a href="https://motion.oku-ui.com"><img src="https://img.shields.io/badge/Oku Motion%20Docs-18181B?logo=vue.js" alt="Website"></a> | ||
| <a href="https://chat.oku-ui.com"><img src="https://img.shields.io/badge/Oku%20Discord-18181B?logo=discord" alt="Discord"></a> | ||
| </p> | ||
| ## Introduction | ||
@@ -16,175 +20,15 @@ | ||
| ## Installation | ||
| Motion Docs: [Oku Motion](https://motion.oku-ui.com) | ||
| Website: [Oku Website](https://oku-ui.com) | ||
| Primitives Docs: [Oku Primitives](https://primitives.oku-ui.com) | ||
| Motion for VueJS can be installed via npm: | ||
| # Contributing | ||
| ```bash | ||
| npm install @oku-ui/motion | ||
| # or | ||
| pnpm add @oku-ui/motion | ||
| # or | ||
| yarn add @oku-ui/motion | ||
| ``` | ||
| Please read our [contributing guide](https://github.com/oku-ui/motion/blob/master/CONTRIBUTING.md) | ||
| Motion for NuxtJS can be installed via npm: | ||
| ## Credits | ||
| ```bash | ||
| npm install @oku-ui/motion-nuxt | ||
| # or | ||
| pnpm add @oku-ui/motion-nuxt | ||
| # or | ||
| yarn add @oku-ui/motion-nuxt | ||
| ``` | ||
| ## Create an animation | ||
| Import the Motion component and register it in your Vue component: | ||
| ```vue | ||
| <script setup lang="ts"> | ||
| import { Motion } from '@oku-ui/motion' | ||
| </script> | ||
| <template> | ||
| <Motion /> | ||
| </template> | ||
| ``` | ||
| The `Motion` component can be used to create an animatable HTML or SVG element. By default, it will render a `div` element: | ||
| ```vue | ||
| <script setup lang="ts"> | ||
| import { Motion } from 'motion/vue' | ||
| </script> | ||
| <template> | ||
| <Motion /> | ||
| </template> | ||
| <style scoped> | ||
| div { | ||
| width: 100px; | ||
| height: 100px; | ||
| border-radius: 10px; | ||
| background-color: var(--splash); | ||
| } | ||
| </style> | ||
| ``` | ||
| Edit the above example by adding an animate prop: | ||
| ```vue | ||
| <Motion :keyframes="{ rotate: 90, backgroundColor: 'var(--yellow)' }" /> | ||
| ``` | ||
| 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. | ||
| ```vue | ||
| <Motion | ||
| :keyframes="{ rotate: 90, backgroundColor: 'var(--yellow)' }" | ||
| :transition="{ duration: 1, easing: 'ease-in-out' }" | ||
| /> | ||
| ``` | ||
| By default transition options are applied to all values, but we can also override on a per-value basis: | ||
| ```vue | ||
| <Motion | ||
| :keyframes="{ rotate: 90, backgroundColor: 'var(--yellow)' }" | ||
| :transition="{ | ||
| duration: 1, | ||
| rotate: { duration: 2 }, | ||
| }" | ||
| /> | ||
| ``` | ||
| ## Keyframes | ||
| Values can also be set as arrays, to define a series of keyframes. | ||
| ```vue | ||
| <Motion :keyframes="{ x: [0, 100, 50] }" /> | ||
| ``` | ||
| By default, keyframes are spaced evenly throughout `duration`, but this can be adjusted by providing progress values to `offset`: | ||
| ```vue | ||
| <Motion | ||
| :keyframes="{ x: [0, 100, 50] }" | ||
| :transition="{ x: { offset: [0, 0.25, 1] } }" | ||
| /> | ||
| ``` | ||
| ## 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. | ||
| ```vue | ||
| <Motion :initial="false" :keyframes="{ x: 100 }" /> | ||
| ``` | ||
| ## 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: | ||
| ```vue | ||
| <script setup lang="ts"> | ||
| import { Motion, Presence } from 'motion/vue' | ||
| const show = ref(true) | ||
| </script> | ||
| <template> | ||
| <div class="container"> | ||
| <Presence> | ||
| <Motion | ||
| v-show="show" | ||
| :initial="{ opacity: 0, scale: 0 }" | ||
| :keyframes="{ opacity: 1, scale: 1 }" | ||
| :exit="{ opacity: 0, scale: 0.6 }" | ||
| class="box" | ||
| /> | ||
| </Presence> | ||
| <button @click="show = !show"> | ||
| Toggle | ||
| </button> | ||
| </div> | ||
| </template> | ||
| <style> | ||
| .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); | ||
| } | ||
| </style> | ||
| ``` | ||
| `exit` can be provided a `transition` of its own, that override the component's `transition`: | ||
| ```vue | ||
| <Motion | ||
| v-show="isVisible" | ||
| :keyframes="{ opacity: 1 }" | ||
| :exit="{ opacity: 0, transition: { duration: 0.8 } }" | ||
| :transition="transition" | ||
| /> | ||
| ``` | ||
| - Special thanks to the **[Motion](https://github.com/motiondivision/motion)** library, which provided a solid foundation for the animation features in this project. | ||
| - A significant portion of the source code was directly adapted and extended from **[rick-hup](https://github.com/rick-hup/motion-vue)**, whose work was crucial in implementing motion within Vue.js. | ||
| - **[motionone](https://github.com/motiondivision/motionone)** served as an essential resource for the underlying animation capabilities used in this project. | ||
| - **[vue-motion-one](https://github.com/wobsoriano/vue-motion-one/tree/master)** provided valuable insights that helped shape the motion features. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.31%
785242
- Number of lines in readme file
- decreased by-82.11%
34
No dependency changes