# vue-kinesis

> Easily create complexe interactive animations with Vue.js

Latest version **1.3.3** (published 2021-06-14) · 0 weekly downloads

## Install

```sh
npm install vue-kinesis
pnpm add vue-kinesis
yarn add vue-kinesis
bun add vue-kinesis
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2021-06-14 |
| First published | 2019-12-31 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 109.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1497 |
| Author | Amine Bouyarmane |
| Maintainers | aminerman |
| Keywords | frontend, animation, interaction, vue, vue.js, parallax, mouse, hover, scroll, gyroscope, audio |

## Links

- npm: https://www.npmjs.com/package/vue-kinesis
- Repository: https://github.com/Aminerman/vue-kinesis
- Homepage: https://github.com/Aminerman/vue-kinesis#readme
- Issues: https://github.com/Aminerman/vue-kinesis/issues
- npm.io page: https://npm.io/package/vue-kinesis

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.3.3 (latest) — 2021-06-14
- 2.0.5 (next) — 2021-06-11
- 1.3.2 — 2021-06-11
- 1.3.1 — 2021-06-11
- 2.0.4 — 2020-12-29
- 1.2.3 — 2020-12-29
- 2.0.3 — 2020-12-29
- 1.2.2 — 2020-12-29
- 1.2.1 — 2020-12-22
- 2.0.2 — 2020-12-22
- 2.0.1 — 2020-12-21
- 2.0.0 — 2020-12-21
- 1.1.7 — 2020-11-10
- 1.1.6 — 2020-11-10
- 1.1.5 — 2020-03-24
- … 19 more at https://npm.io/package/vue-kinesis/versions

## README

# vue-kinesis

[![npm](https://img.shields.io/npm/v/vue-kinesis.svg)](https://img.shields.io/npm/v/vue-kinesis.svg) 
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
[![vue2](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)

Easy to use Vue.js components for creating interactive animations

## Demo

[Kinesis Demo](https://aminerman.com/kinesis/)

# Vue3 - Installation 

```
npm install --save vue-kinesis@next
```

## Vue3 - Default import 

Install all the components:

```javascript
import { createApp } from "vue";
import App from "./App.vue";
import VueKinesis from "vue-kinesis";

const app = createApp(App);
app.use(VueKinesis);

app.mount("#app");
```

# Vue2 - Installation

```
npm install --save vue-kinesis
```

## Vue2 - Default import

Install all the components:

```javascript
import Vue from 'vue'
import VueKinesis from 'vue-kinesis'

Vue.use(VueKinesis)
```

Use specific components:

```javascript
import Vue from 'vue'
import { KinesisContainer, KinesisElement } from 'vue-kinesis'

Vue.component('kinesis-container', KinesisContainer)
Vue.component('kinesis-element', KinesisElement)
```

## Browser

```html
<script src="vue.js"></script>
<script src="vue-kinesis.min.js"></script>
```


# Usage

[How to use](https://aminerman.com/kinesis/)


## Props

### kinesis-container

| Prop   |      Type      |  Default Value | Description
|----------|:-------------:|------|------|
| active |  Boolean | true | To enable or disable the interactions |
| duration |  Number | 1000 | Speed of the parallax animation in ms |
| easing |  String   | "cubic-bezier(0.23, 1, 0.32, 1)" | Easing of the parallax animation |
| tag |  String   | div | Takes any valid html tag |
| event |  String   | "move" | Event to which the container will react. Possible values are "move" and "scroll" |
| perspective |  Number   | 1000 | Effective for the 'depth' parallax type |
| audio |  String   |  | Path towards an audio file |
| playAudio |  Boolean   |  | Start/Stop the attached audio file |

### kinesis-element
| Prop   |      Type      |  Default Value | Description
|----------|:-------------:|------|------|
| strength |  Number | 10 | Strength of the motion effect |
| type |  String   | "translate" | translate - rotate - scale - scaleX - scaleY - depth - depth_inv |
| tag |  String   | "div" | Takes any valid html tag |
| transformOrigin |  String   | "center" | Similar to the CSS transform-origin property |
| originX |  Number   | 50 | The motion's origin relative to the container, on the X axis. 50 being the center of the container, 0 the left side, 100 the right side. |
| originY |  Number   | 50 | The motion's origin relative to the container, on the Y axis. 50 being the center of the container, 0 the top side, 100 the bottom side. |
| axis |  String   | null | Constrain the movement to one axis. Possible values: "x" - "y" |
| maxX |  Number   | null | Limit the maximum range of the movement on the X axis |
| maxY |  Number   | null | Limit the maximum range of the movement on the Y axis |
| minX |  Number   | null | Limit the minimum range of the movement on the X axis |
| minY |  Number   | null | Limit the minimum range of the movement on the Y axis |
| cycle |  Number   | 0 | How many times the movement will repeat |

### kinesis-audio
| Prop   |      Type      |  Default Value | Description
|----------|:-------------:|------|------|
| audioIndex |  Number | 50 | To which frequency to react, on a range of integer values that goes from 0 to 127. |
| strength |  Number | 10 | Strength of the motion effect |
| type |  String   | "translate" | translate - rotate - scale - scaleX - scaleY - depth - depth_inv |
| tag |  String   | "div" | Takes any valid html tag |
| transformOrigin |  String   | "center" | Similar to the CSS transform-origin property |
| originX |  Number   | 50 | The motion's origin relative to the container, on the X axis. 50 being the center of the container, 0 the left side, 100 the right side. |
| originY |  Number   | 50 | The motion's origin relative to the container, on the Y axis. 50 being the center of the container, 0 the top side, 100 the bottom side. |
| axis |  String   | null | Constrain the movement to one axis. Possible values: "x" - "y" |
| maxX |  Number   | null | Limit the maximum range of the movement on the X axis |
| maxY |  Number   | null | Limit the maximum range of the movement on the Y axis |
| minX |  Number   | null | Limit the minimum range of the movement on the X axis |
| minY |  Number   | null | Limit the minimum range of the movement on the Y axis |
| cycle |  Number   | 0 | How many times the movement will repeat |

## Migrating from vue-mouse-parallax
Migration from vue-mouse-parallax is quite easy:

### Components
- parallax-container -> kinesis-container
- parallax-element -> kinesis-element

### Props 
- parallaxStrength -> strength
- animationDuration -> duration

### Prop values
- translation -> translate
- rotation -> rotate

## License

[MIT](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/vue-kinesis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._