Create interactive animations with Vue.js

vue-kinesis

Easy to use Vue.js components for creating interactive animations.

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

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

Download Details:

Live Demo: https://www.aminerman.com/kinesis/#/

GitHub: https://github.com/Aminerman/vue-kinesis

#vue #javascript