@letstri/vue-kinesis

vue-kinesis

Copied from the original Vue Kinesis and updated to Vue 3.

Easy to use Vue 3 components for creating interactive animations

Demo

Kinesis Demo

Installation

npm install --save @letstri/vue-kinesis

Install all the plugin:

import { createApp } from 'vue';
import App from './App.vue';
import { kinesisPlugin } from '@letstri/vue-kinesis';

const app = createApp(App);

app.use(kinesisPlugin);

app.mount('#app');

Usage

<KinesisContainer>
  <KinesisElement />
</KinesisContainer>

Props

KinesisContainer

Prop	Type	Default Value	Description
disabled	Boolean	false	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

KinesisElement

Prop	Type	Default Value	Description
strength	Number	10	Strength of the motion effect
type	String	'translate'	translate - translate-inv - 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
cycles	Number	0	How many times the movement will repeat

License

MIT