Vanilla-tilt.js

vanilla-tilt.js

A smooth 3D tilt javascript library forked from Tilt.js (jQuery version)

Smooth.
Lightweight.
60FPS.
VanillaJS.
No dependencies.
Easy to use

Download

vanilla-tilt.js
~ 15kb

vanilla-tilt.min.js
~ 8.5kb

vanilla-tilt.babel.js
~ 16.5kb

vanilla-tilt.babel.min.js
~ 9.5kb

Right click → Save as

Also available on npm:

npm install vanilla-tilt

How to use

Easy way

<body>
<div class="your-element" data-tilt></div>

<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body>

More options

<div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div>

All options with defaults

{
    reverse:                false,  // reverse the tilt direction
    max:                    35,     // max tilt rotation (degrees)
    startX:                 0,      // the starting tilt on the X axis, in degrees.
    startY:                 0,      // the starting tilt on the Y axis, in degrees.
    perspective:            1000,   // Transform perspective, the lower the more extreme the tilt gets.
    scale:                  1,      // 2 = 200%, 1.5 = 150%, etc..
    speed:                  300,    // Speed of the enter/exit transition
    transition:             true,   // Set a transition on enter/exit.
    axis:                   null,   // What axis should be enabled. Can be "x" or "y"
    reset:                  true,   // If the tilt effect has to be reset on exit.
    "reset-to-start":       true,   // Whether the exit reset will go to [0,0] (default) or [startX, startY]
    easing:                 "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
    glare:                  false,  // if it should have a "glare" effect
    "max-glare":            1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
    "glare-prerender":      false,  // false = VanillaTilt creates the glare elements for you, otherwise
                                    // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
    "mouse-event-element":  null,   // css-selector or link to HTML-element what will be listen mouse events
    gyroscope:              true,   // Boolean to enable/disable device orientation detection,
    gyroscopeMinAngleX:     -45,    // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
    gyroscopeMaxAngleX:     45,     // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
    gyroscopeMinAngleY:     -45,    // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
    gyroscopeMaxAngleY:     45,     // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
}

JS Way

<body>
<div class="your-element"></div>

<script type="text/javascript" src="vanilla-tilt.js"></script>
<script type="text/javascript">
	VanillaTilt.init(document.querySelector(".your-element"), {
		max: 25,
		speed: 400
	});
	
	//It also supports NodeList
	VanillaTilt.init(document.querySelectorAll(".your-element"));
</script>
</body>

The most basic usage:

Add

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

right before the closing

</body>

tag

Mark your elements with
```
<div data-tilt></div>
```

Creating a parallax effect

Add
```
transform-style: preserve-3d
```
to your tilt element.
Add
```
transform: perspective(1000px);
```
to your tilt element. (1000px is default perspective, but can be changed)
Add a
```
transform: translateZ(20px)
```
to your inner elements that have to pop out.

Glare effect

Setting this option will enable a glare effect. You can tweak the glare value with

data-tilt-max-glare

<div data-tilt data-tilt-glare data-tilt-max-glare="0.8"></div>

Reverse tilt

Setting this option will reverse the tilt.

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

Keep floating

Setting this option will not reset the tilt element when the user mouse leaves the element.

<div data-tilt data-tilt-reset="false"></div>

Full page listening

Setting this option will make the element respond to any mouse movements on page.

<div data-tilt data-tilt-full-page-listening></div>

Scale on hover

Setting this option will scale tilt element on hover.

<div data-tilt data-tilt-scale="1.1"></div>

Start tilt position

Setting this option will tilt the element at specific degrees at page load.

<div data-tilt data-tilt-startX="20" data-tilt-startY="-20" data-tilt-reset-to-start="true"></div>

"reset-to-start" - on mouse leave will reset the position to [startX, startY]

Disable X axis

Setting this option will disable the X-Axis on the tilt element.

<div data-tilt data-tilt-axis="y"></div>

Disable Y axis

Setting this option will disable the Y-Axis on the tilt element.

<div data-tilt data-tilt-axis="x"></div>

Destroy method

Call this method will remove all events and classes from the tilt element.

let destroyBox = document.querySelector("#destroy-box");
VanillaTilt.init(destroyBox);

document.querySelector("#destroy-button").addEventListener("click", function () {
    destroyBox.vanillaTilt.destroy();
});

document.querySelector("#enable-button").addEventListener("click", function () {
    VanillaTilt.init(destroyBox);
});

Tilt change event

The tilt change event will output the x,y & percentages of tilting.

let eventBox = document.querySelector("#box-event");
let outputContainer = document.querySelector(".output");
VanillaTilt.init(eventBox);


eventBox.addEventListener("tiltChange", function (event) {
	let li = document.createElement("li");
	li.textContent = JSON.stringify(event.detail);
	outputContainer.insertBefore(li, outputContainer.firstChild);
});