Creating Engaging 3D Tilt Effects with vanilla-tilt.js

In the world of web development, adding interactive and visually appealing effects to your website can greatly enhance the user experience.

In this blog post, we will explore vanilla-tilt.js, a JavaScript library that makes it easy to implement stunning 3D tilt effects without any hassle.

What is vanilla-tilt.js?

vanilla-tilt.js is a lightweight and dependency-free JavaScript library that enables you to add a delightful 3D tilt effect to HTML elements. This library simplifies the process of creating interactive and dynamic designs by leveraging the power of CSS transforms and transitions.

Getting Started

To begin using vanilla-tilt.js, you can either download the library from the official GitHub repository or include it via a CDN. The library is compatible with all modern browsers and doesn’t require any additional dependencies.

Download links are mentioned in the website.

You can also install it using npm

npm install vanilla-tilt

Usage

This library can be used in 2 ways as mentioned below

Script tag method

If you are going to use a script tag to include the library then it is very simple. Just add data-tilt attribute to your HTML element and you are good to go!

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

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

Manual initialization method

If you want to manually initialize tilt.js only on certain elements or on demand then you can do it this 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>

This method can also be used in the case of React.js

Bundle size

vanilla-tilt.js is just 8.5kb minified so it is safe to use and won’t add up to your website size.

Conclusion

vanilla-tilt.js also supports features like the parallax effect, glare effect, reverse tilt, etc. Explore all the available options from their official website and have fun creating some interesting 3d effects ✌️