Kinesis 2.0 is out: kinesisjs.com. The same idea, now written as CSS properties (.card { --k-tilt: 8deg; }), with no framework required. It also has a Vue plugin (v-kinesis). Install it with npm i @amineyarman/kinesis.

vue-kinesis stays available below for existing projects.

vue-kinesis

Easy to use Vue.js components for creating interactive animations

Demo

Kinesis Demo

Tutorials

• LogRocket - Top 5 Vue Animation Libraries
• LogRocket - Interactive Vue Animations with Kinesis
• Leonardo Gruppelli - Kinesis Animation for Nuxt
• Coliss - 便利なのが登場！Vue.jsでインタラクティブなアニメーションを簡単に実装できる軽量コンポーネント -Kinesis
• Kabanoki - コイツ動くぞ？！的なアニメーションが付けられる「vue-kinesis」
• Mebee - Nuxt.js vue-kinesisを使用してアニメーションをかける
• ... Feel free to open a PR if you want to suggest a tutorial link 🙏

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