vue-kinesis
Easy to use Vue.js components for creating interactive animations
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
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