Interactive Parallax Tilt Effect In Vanilla JavaScript – vanilla-tilt.js

Category: Animation , Javascript , Recommended | April 13, 2019
Author: micku7zu
Views Total: 1,955 views
Official Page: Go to website
Last Update: April 13, 2019
License: MIT


Interactive Parallax Tilt Effect In Vanilla JavaScript – vanilla-tilt.js


vanilla-tilt.js is a lightweight JavaScript library for creating interactive parallax tilt effect on DOM element using requestAnimationFrame. Similar to the Apple tvOS’ poster parallax effect. Without any dependencies and fully customizable.

How to use it:

Download and place the main JavaScript file vanilla-tilt.js at the bottom of the webpage.

<script src="vanilla-tilt.js"></script>

Apply the parallax tilt effect to your element using HTML data attribute as follow:

<div data-tilt></div>

Or initialize the parallax tilt effect with the following configuration options.

VanillaTilt.init(document.querySelectorAll(".element"), {
  reverse: false,
  max: 35,
  perspective: 1000,
  easing: "cubic-bezier(.03,.98,.52,.99)",
  scale: 1,
  speed: 300,
  transition: true,
  axis: null,
  glare: false,
  "max-glare": 1,
  "glare-prerender": false,
  "mouse-event-element": null,
  reset: true

API methods.

// Destroy

// Get values

// Reset

Perform an action when the tilt changes.

element.addEventListener("tiltChange", callback);


v1.7.0 (04/13/2019)

  • Fixed and refactored some code

v1.6.2 (04/13/2019)

  • Added gyroscopeSamples
  • Added full-page-listening


  • v1.6.1: Fix gyroscope false


  • v1.6.0: Fix first onDeviceOrientation call from desktop


  • Clear everything on destroy().

You Might Be Interested In:

Leave a Reply