Interactive Animations In Vue.js - vue-kinesis

Install & Download:

Description:

vue-kinesis is a lightweight and easy-to-use Vue.js component library to create interactive animations on the app.

Components included:

kinesis-audio
kinesis-container.vue
kinesis-distance.vue
kinesis-element.vue
kinesis-scroll.vue

How to use it:

1. Import the vue-kinesis.

import Vue from 'vue'
import VueKinesis from 'vue-kinesis'

2. Register the component.

Vue.use(VueKinesis);
// or
import { KinesisContainer, KinesisElement } from 'vue-kinesis'
Vue.component('kinesis-container', KinesisContainer)
Vue.component('kinesis-element', KinesisElement)

3. Create an interactive animation on images.

<kinesis-container>
  <kinesis-element 
      tag="img"
      :src="spider"
      :strength="-10"
      type="rotate"
      transformOrigin="50% 300%"
      axis="x"
      type="depth" />
  <kinesis-element 
      tag="img"
      :src="ladybug"
      :strength="10"
      type="rotate"
      transformOrigin="50% 300%"
      axis="x"
      type="depth" />
  <kinesis-element 
      tag="img"
      :src="fennec"
      :strength="10"
      type="depth"
      transformOrigin="50% 300%"
      type="depth" />
</kinesis-container>