Interactive Animations In Vue.js – vue-kinesis

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>

Changelog:

v1.3.3 (06/14/2021)

• updated

v1.3.2 (06/11/2021)

• updated

v1.2.3 (12/29/2020)

• updated

v1.2.1 (12/21/2020)

• fix(container): redundant isMoving

v1.1.7 (11/25/2020)

• fix(container): redundant isMoving

v1.1.5 (03/25/2020)

• fix(element): Event scroll to take into consideration originY prop

Download Details:

Author:

Live Demo:

Download Link:

Official Website:

Install & Download: