Socket
Socket
Sign inDemoInstall

vue-kinesis

Package Overview
Dependencies
10
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-kinesis

Easily create complexe interactive animations with Vue.js


Version published
Maintainers
1
Weekly downloads
5,249
decreased by-1.56%

Weekly downloads

Readme

Source

vue-kinesis

npm vue2 vue2

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

PropTypeDefault ValueDescription
activeBooleantrueTo enable or disable the interactions
durationNumber1000Speed of the parallax animation in ms
easingString"cubic-bezier(0.23, 1, 0.32, 1)"Easing of the parallax animation
tagStringdivTakes any valid html tag
eventString"move"Event to which the container will react. Possible values are "move" and "scroll"
perspectiveNumber1000Effective for the 'depth' parallax type
audioStringPath towards an audio file
playAudioBooleanStart/Stop the attached audio file

kinesis-element

PropTypeDefault ValueDescription
strengthNumber10Strength of the motion effect
typeString"translate"translate - rotate - scale - scaleX - scaleY - depth - depth_inv
tagString"div"Takes any valid html tag
transformOriginString"center"Similar to the CSS transform-origin property
originXNumber50The 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.
originYNumber50The 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.
axisStringnullConstrain the movement to one axis. Possible values: "x" - "y"
maxXNumbernullLimit the maximum range of the movement on the X axis
maxYNumbernullLimit the maximum range of the movement on the Y axis
minXNumbernullLimit the minimum range of the movement on the X axis
minYNumbernullLimit the minimum range of the movement on the Y axis
cycleNumber0How many times the movement will repeat

kinesis-audio

PropTypeDefault ValueDescription
audioIndexNumber50To which frequency to react, on a range of integer values that goes from 0 to 127.
strengthNumber10Strength of the motion effect
typeString"translate"translate - rotate - scale - scaleX - scaleY - depth - depth_inv
tagString"div"Takes any valid html tag
transformOriginString"center"Similar to the CSS transform-origin property
originXNumber50The 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.
originYNumber50The 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.
axisStringnullConstrain the movement to one axis. Possible values: "x" - "y"
maxXNumbernullLimit the maximum range of the movement on the X axis
maxYNumbernullLimit the maximum range of the movement on the Y axis
minXNumbernullLimit the minimum range of the movement on the X axis
minYNumbernullLimit the minimum range of the movement on the Y axis
cycleNumber0How 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

Keywords

FAQs

Last updated on 14 Jun 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc