🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@letstri/vue-kinesis

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install
Package was removed
Sorry, it seems this package was removed from the registry

@letstri/vue-kinesis

Easily create complexe interactive animations with Vue 3

0.0.6
unpublished
latest
Source
npm
Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

vue-kinesis

Copied from the original Vue Kinesis and updated to Vue 3.

npm vue3

Easy to use Vue 3 components for creating interactive animations

Demo

Kinesis Demo

Installation

npm install --save @letstri/vue-kinesis

Install all the plugin:

import { createApp } from 'vue';
import App from './App.vue';
import { kinesisPlugin } from '@letstri/vue-kinesis';

const app = createApp(App);

app.use(kinesisPlugin);

app.mount('#app');

Usage

<KinesisContainer>
  <KinesisElement />
</KinesisContainer>

Props

KinesisContainer

PropTypeDefault ValueDescription
disabledBooleanfalseTo enable or disable the interactions
durationNumber1000Speed of the parallax animation in ms
easingString'cubic-bezier(0.23, 1, 0.32, 1)'Easing of the parallax animation
tagStringdivTakes any valid html tag
eventString'move'Event to which the container will react. Possible values are 'move' and 'scroll'
perspectiveNumber1000Effective for the 'depth' parallax type

KinesisElement

PropTypeDefault ValueDescription
strengthNumber10Strength of the motion effect
typeString'translate'translate - translate-inv - rotate - scale - scaleX - scaleY - depth - depth-inv
tagString'div'Takes any valid html tag
transformOriginString'center'Similar to the CSS transform-origin property
originXNumber50The 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.
originYNumber50The 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.
axisStringnullConstrain the movement to one axis. Possible values: 'x' - 'y'
maxXNumbernullLimit the maximum range of the movement on the X axis
maxYNumbernullLimit the maximum range of the movement on the Y axis
minXNumbernullLimit the minimum range of the movement on the X axis
minYNumbernullLimit the minimum range of the movement on the Y axis
cyclesNumber0How many times the movement will repeat

License

MIT

Keywords

frontend

FAQs

Package last updated on 12 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts