Skip to content
Easily create complex interactive animations with Vue.js
Vue JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist KinesisAudio - pause() instead of stop() Jan 14, 2020
src
.editorconfig V1 Release Sep 22, 2019
.eslintignore 3D Transforms Oct 23, 2019
.gitignore vue-kinesis 1.0.0 Jan 2, 2020
LICENSE Create LICENSE Oct 9, 2019
README.md README - removed download badge Dec 31, 2019
babel.config.js V1 Release Sep 22, 2019
package-lock.json vue-kinesis replaces vue-mouse-parallax Dec 31, 2019
package.json KinesisAudio - pause() instead of stop() Jan 14, 2020
rollup.config.js vue-kinesis 1.0.0 Jan 2, 2020
vue.config.js Updated Todo Oct 24, 2019

README.md

vue-kinesis

npm vue2

Easy to use Vue.js components for creating interactive animations

Demo

Kinesis Demo

Installation

npm install --save vue-kinesis

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

You can’t perform that action at this time.