Learn how to install the library Tilt.js in WordPress. This library is a very lightweight one that can make huge improvements – if used with care – to your user experience. Ready to level up your next WordPress website with some fancy neat animations?

Learn how to 3D animate on hover your images, buttons, or entire rows.

Tilt.js is a jQuery plugin without CSS dependencies that creates some neat 3D visual effects to the Section, Row or Module that you want! And, it’s as simple as adding a class to an element.

Ready to learn how to install and use Tilt.js in WordPress? I always use Divi as the main WordPress theme for all my tutorials, but you can manage to make it work in any WordPress theme. So, without further ado, let’s start!

Animated GIF  - Find & Share on GIPHY

How to install Tilt.js in WordPress

Preview

First, go to Tilt.js GitHub page and copy the CDN link. It’ll be used to install the latest version of Tilt.js in your WordPress website.

Add the CDN link like this inside Divi > Theme Options > Integration > Add code to the < head > of your blog:

<script type="text/javascript" src="https://unpkg.com/tilt.js@1.1.21/dest/tilt.jquery.min.js"></script>

JS

Secondly, you need to activate the jQuery plugin to make it work. Add the following classes inside Divi > Theme Options > Integration > Add code to the < head > of your blog. Please, don’t forget to add the code with <script> tags. Or, use a plugin to easily handle code snippets in WordPress.

jQuery(document).ready(function( $ ){
  $('.tilt-img img').tilt({
    scale: 1.05,
    perspective: 500,
    glare: true,
    maxGlare: .3,
  });
  
  $('.tilt-a a').tilt({
    scale: 1.05,
    perspective: 500,
    glare: true,
    maxGlare: .3,
  });
  
  $('.tilt').tilt({
    scale: 1.05,
    perspective: 500,
    glare: false,
  });
});

Properties

The video tutorial explains the basic usage of the Tilt.js for WordPress. But, if you want to dive deeper inside this 3D animation, there’re lots of properties to play around with.

  • maxTilt;
  • perspective;
  • easing;
  • scale;
  • speed;
  • transition;
  • axis;
  • reset;
  • glare;
  • maxGlare.

For further studies, please access the Tilt.js documentation.

Layout

If you are using the Divi theme, just create any Module that you want and place the class tilt in it. It’s very fun to use it when you become comfortable with this plugin.

I have already in mind lots of ideas for layouts and creative designs for my next Divi clients.

Conclusion

I truly hope you learned how to correctly install Tilt.js in WordPress. Using some plugins like this – together with Divi theme – makes it easy to create fancy projects faster. Get your ideas ready in just a few hours of focused work.

Did you implement it in one of your websites/projects? Please, send me a link to it or share in the comments!

If you liked it, please share with other WordPress and Divi theme ❤.

See ya!