Jump to content

3D Tilt on Images

Recommended Posts

There will be a few steps to do this.

  • This particular js file isn't available on a CDN (content delivery network), so you'll need to download it and upload it yourself to your own site. as its a javascript file the best way to do this is to add a link somewhere on your page and upload the file from there.
  • You'll then need to inject the script tag into your website using the javascript source files new location (something like "/s/vanilla-tilt.js"). the way that this library is written (both the jQuery and the vanilla js version) is that they recommend you insert it at the end, so use Settings > Advanced > Code Injection and inject it into the footer.
    • NOTE: if you download the minified version that's vanilla-tit.min.js, you'll need to rename it as Squarespace doesn't like files with multiple dots in, so just go for vanilla-tiltmin.js. 
  • The library by default looks for things to tilt declaratively  so you'll need to put the things you want to tilt inside code blocks so you can mark the div up with the "data-tilt" attribute(s).
  • If you want to use existing elements to tilt then you'll need to find the relevant IDs and write some code to tilt those elements.

example for doing it declaratively in a code block

<div data-tilt style="text-align:center; background-color:red; color:white; padding:15px; width:300px;">
  Tilt Me

example for doing it imperatively with code block (using vanilla tilt, I would recommend that over the jquery one)

<div id="someid" style="text-align:center; background-color:red; color:white; padding:15px; width:300px;">
  Tilt Me
  document.addEventListener("DOMContentLoaded", (e)=> {
    VanillaTilt.init(document.querySelector("#someid"), {
		max: 25,
		speed: 400


Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.