Skip to content

amineyarman/vue-kinesis

Repository files navigation

October 2024: A full TS version is now available KinesisJS. You can use it in your vue projects if you need any of the new features. It works with Vue but a dedicated Vue version is in the works.

March 2024: The project has been on standby for a while now. But good news! I'm working on a brand new version, more robust, with better documentation and more features!

What's in preparation:

  • Rewriting everything in TS
  • New interactions
  • A detailed documentation
  • A vanilla TS version

vue-kinesis

npm vue2 vue2

Easy to use Vue.js components for creating interactive animations

Demo

Kinesis Demo

Tutorials

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