vue-kinesis

Easily create complex interactive animations with Vue.js

1,474

Top Related Projects

Quick Overview

Vue Kinesis is a lightweight and easy-to-use Vue.js component library for creating interactive animations based on mouse or device movement. It allows developers to add parallax effects, motion tracking, and other dynamic visual elements to their Vue applications with minimal effort.

Pros

Simple integration with Vue.js projects
Customizable and flexible animation options
Responsive design, works well on both desktop and mobile devices
Lightweight with minimal performance impact

Cons

Limited to Vue.js framework, not usable with other JavaScript libraries
May require additional optimization for complex animations on low-end devices
Documentation could be more comprehensive for advanced use cases
Relatively small community compared to larger animation libraries

Code Examples

Basic Kinesis Container:

<template>
  <kinesis-container>
    <kinesis-element :strength="10">
      <h1>Hello, Vue Kinesis!</h1>
    </kinesis-element>
  </kinesis-container>
</template>

This example creates a simple kinesis container with a moving text element.

Custom Animation Type:

<template>
  <kinesis-container>
    <kinesis-element
      :strength="20"
      type="rotate"
      :max="15"
    >
      <img src="logo.png" alt="Logo" />
    </kinesis-element>
  </kinesis-container>
</template>

This code creates a rotating image that responds to mouse movement.

Multiple Elements with Different Strengths:

<template>
  <kinesis-container>
    <kinesis-element :strength="10">
      <p>Slow moving text</p>
    </kinesis-element>
    <kinesis-element :strength="30">
      <p>Fast moving text</p>
    </kinesis-element>
  </kinesis-container>
</template>

This example demonstrates how to create multiple elements with different movement speeds within the same container.

Getting Started

Install the package:
```
npm install vue-kinesis
```
Import and use in your Vue.js application:

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

Vue.use(VueKinesis)

Use the components in your template:

<template>
  <kinesis-container>
    <kinesis-element :strength="10">
      <p>This element will move!</p>
    </kinesis-element>
  </kinesis-container>
</template>

Competitor Comparisons

vue-awesome-swiper

12,806

🏆 Swiper component for @vuejs

Pros of vue-awesome-swiper

More comprehensive and feature-rich slider/carousel solution
Better documentation and examples
Larger community and more frequent updates

Cons of vue-awesome-swiper

Heavier dependency due to Swiper.js integration
Steeper learning curve for advanced features
Less suitable for simple parallax or mouse-tracking effects

Code Comparison

vue-kinesis:

<kinesis-container>
  <kinesis-element :strength="10">
    <img src="image.jpg" alt="Kinesis element">
  </kinesis-element>
</kinesis-container>

vue-awesome-swiper:

<swiper :options="swiperOptions">
  <swiper-slide>
    <img src="image1.jpg" alt="Slide 1">
  </swiper-slide>
  <swiper-slide>
    <img src="image2.jpg" alt="Slide 2">
  </swiper-slide>
</swiper>

Summary

vue-awesome-swiper is better suited for complex carousel and slider implementations, offering a wide range of features and customization options. It has stronger community support and more frequent updates. However, it comes with a larger footprint and may be overkill for simpler projects.

vue-kinesis, on the other hand, excels in creating lightweight parallax and mouse-tracking effects. It's easier to set up for basic use cases but may lack some advanced features found in vue-awesome-swiper. Choose based on your project's specific requirements and complexity.

vue-touch

2,722

Hammer.js wrapper for Vue.js

Pros of vue-touch

More established and widely used in the Vue.js ecosystem
Focuses on touch events, providing a specialized solution for mobile interactions
Offers a broader range of gesture recognitions (tap, swipe, pan, etc.)

Cons of vue-touch

Less actively maintained, with fewer recent updates
Limited to touch interactions, lacking support for mouse or other input methods
May require additional configuration for complex gestures

Code Comparison

vue-touch:

<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight">
  <div>Swipe me</div>
</v-touch>

vue-kinesis:

<kinesis-container>
  <kinesis-element :strength="10" type="depth" axis="x">
    <div>Move your mouse</div>
  </kinesis-element>
</kinesis-container>

vue-touch focuses on touch events and gestures, making it suitable for mobile-centric applications. It provides a straightforward way to handle common touch interactions.

vue-kinesis, on the other hand, offers a more versatile solution for creating interactive and responsive elements based on mouse movement or device orientation. It's not limited to touch events and can create engaging visual effects for both desktop and mobile experiences.

While vue-touch is more established, vue-kinesis provides a fresh approach to interactivity that can enhance user engagement across various devices and input methods.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

March 2024: The project has been on standby for a while now. But good news! I'm working on a brand new version, more robust, with better documentation and more features!

What's in preparation:

Rewriting everything in TS
New interactions
A detailed documentation
A vanilla TS version

vue-kinesis

Easy to use Vue.js components for creating interactive animations

Demo

Kinesis Demo

Tutorials

Vue3 - Installation

npm install --save vue-kinesis@next

Vue3 - Default import

Install all the components:

import { createApp } from "vue";
import App from "./App.vue";
import VueKinesis from "vue-kinesis";

const app = createApp(App);
app.use(VueKinesis);

app.mount("#app");

Vue2 - Installation

npm install --save vue-kinesis

Vue2 - 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

Top Related Projects

vue-awesome-swiper

12,806

🏆 Swiper component for @vuejs

vue-touch

2,722

Hammer.js wrapper for Vue.js

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

vue-kinesis

Top Related Projects

vue-awesome-swiper

vue-touch

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

vue-awesome-swiper

Pros of vue-awesome-swiper

Cons of vue-awesome-swiper

Code Comparison

Summary

vue-touch

Pros of vue-touch

Cons of vue-touch

Code Comparison

Convert designs to code with AI

README

March 2024: The project has been on standby for a while now. But good news! I'm working on a brand new version, more robust, with better documentation and more features!

vue-kinesis

Demo

Tutorials

Vue3 - Installation

Vue3 - Default import

Vue2 - Installation

Vue2 - Default import

Browser

Usage

Props

kinesis-container

kinesis-element

kinesis-audio

Migrating from vue-mouse-parallax

Components

Props

Prop values

License

Top Related Projects

vue-awesome-swiper

vue-touch

Convert designs to code with AI

NPM DownloadsLast 30 Days