The project is on standby for now. I'm focusing on another project and will come back to this one when I'm done. Do not hesitate if you want to help with the issues or show your support in one way or another 🤝

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

kinesis-element

kinesis-audio

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