Interactive Animations In Vue.js – vue-kinesis

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>

Changelog:

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:

You Might Be Interested In:

Add Comment