vue-kinesis

Easy to use Vue.js components for creating interactive animations

Demo

Kinesis Demo

Vue3 - Installation

npm install --save vue-kinesis@next

Vue3 - Default import

Install all the components:

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:

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

Vue.use(VueKinesis)

Use specific components:

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

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

Browser

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

Usage

How to use

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