A Vue.js element-tilting directive

Usage no npm install needed!

<script type="module">
  import vTilterino from 'https://cdn.skypack.dev/v-tilterino';



Vue Directive tilting the element on hover events and depending on device orientation (if on mobile).

The directive is built around Vanilla-tilt.js


You can install the directive with npm via npm install v-tilterino

Use it in Vue

// main.js

import Tilterino from 'v-tilterino'

/** other code **/

Vue.use(Tilterino, installOptions)

Use the v-tilt directive in any HTMLElement or component

// MyComponent.js

  <MyComponent v-tilt>
  <div v-tilt>

Options can be passed as installOptions when registering the plugin or directly on the element carrying the directive, prepended with data-tilt-; e.g.:

<div v-tilt data-tilt-{option}={value}>

<div v-tilt data-tilt-reverse="true">

All installOptions with defaults are:

  reverse: false,
  max: 5,
  perspective: 1000,
  easing: "cubic-bezier(.03,.98,.52,.99)",
  scale: 1,
  speed: 300,
  transition: true,
  axis: null,
  "mouse-event-element": null,
  reset: true,
  gyroscope: true,
  gyroscopeMinAngleX: -25,
  gyroscopeMaxAngleX: 25,
  gyroscopeMinAngleY: -25,
  gyroscopeMaxAngleY: 25

On how to use these options I refer to Vanilla-tilt.js