My initial exposure to Tilt.js was through the webpage https://gijsroge.github.io/tilt.js/

However, following the basic usage, It states you're to use <span data-tilt></span>. Until visiting the git did I then realise it is now a <div> tag.

Please, can you edit your website?

I am using an ajax call to reload the items that use tilt. (filtering and ordering by location for example).
The script removes all current items and generates new code, without reloading the page.
That causes tilt to stop working for the new items.

As a workaround i now send the vanilla tilt script with each ajax call, but it feels dirty.
I believe these can be solved by converting to delegate methods like .on("click".. instead of click(..)

Isn't this lib available on some CDN provider?

Has anybody been experiencing lags on chromium based browsers?

chrome:

safari:

Hello,

Tilt is working very well, although I have came across an issue where when you move your mouse off a tilt element with scaling enabled, the contents blur afterwards.

See below a screenshot.

Here you can see the content in the box in the middle is blurry, as opposed the content on the right. Each of these boxes are separate tilt elements, each with scaling enabled.

• The left is during hovered state.
• The middle is a result of hovering over the element and then moving the mouse off (the issue is the content is blurry)
• The right hasn't had any interaction yet.

Thanks in advance.

Other-than this issue, great job with tilt.js. I love it.

I was wondering if tilt works with an image?

Hi, your library is great!!
I only had an incompatibily with the CSS property "clip-path".
The move for elements inside my data-tilt doesnt work and 3D effect is lost... ¿could I change anything or add something else for have both effects (clip-path and transform)?

This is my demo site: http://test.1simplegame.com/

Hi
so basically i have a Polaroid collage with slightly rotated images. I would like to initiate tilt on mouse over and destroy it on mouse out. But i would like it to stay in the original rotated position at all times. But when you hover over the image it straightens out. Is there a way to stop this from happening? I ended up just using a mouse out event and removed those styles but why wont the destroy do that. I removed my mouse out event so that you can see what happens with out it.

avid7.com/test/ is the domain that it is on

When I hover over Iframe trying to use this plugin there is an error:

Uncaught TypeError: Cannot read property 'x' of undefined
    at HTMLDivElement.getValues (tilt.jquery.js:91)
    at HTMLDivElement.updateTransforms (tilt.jquery.js:106)
getValues @ tilt.jquery.js:91
updateTransforms @ tilt.jquery.js:106

It works perfectly with everything else, but not with one thing I need. I wanted to apply this effect to google maps iframe.

I guess this is kind of issue so here I am :)

The landing page says in order to disable a particular axis, an axis property can be provided as

$('.js-tilt').tilt({ axis: x });

Which doesn't work

The value should be string and wrapped in quotes as axis: 'x' in order to work.

Hello,

I'm having a problem with getting tilt to run on my node server web app. I'm importing both jquery and tilt.js through the angular-cli configuration file.

However, when trying to run, I get this log error:
columnNumber : 24
fileName : "http://localhost:4200/main.bundle.js"
lineNumber : 381
message : "$(...).tilt is not a function"

If glare is set to true, an overlay div js-tilt-glare blocks click functionality of elements nested within the tilt object.

Hi,

I really like the jquery plugin so I built a react version.

I'm working on the glare effect, tests and refactoring.

Thank you.

Is it possible to install this jQuery plugin through bower?

Thanks.

I tried the demo in the master, it has wrong links. Tried adding jquery.min manually but results in errors.

'Tilt.js: the axis setting has been renamed to disableAxis. See #26 for more information
(anonymous) @ tilt.jquery.js? [sm]:278
each @ jquery-3.2.1.slim.min.js:2
each @ jquery-3.2.1.slim.min.js:2
$.fn.tilt @ tilt.jquery.js? [sm]:255
(anonymous) @ index.html:19'

It's a problem with no reaction when tilt object under the another object (Z-index).

How do you use when jQuery is not global?

Even using it this way throws me that jQuery is undefined.

require('jquery')
require('tilt.js')

Also tried like this but I got the same error though:

var jQuery = require('jquery')
require('tilt.js')

var $container = jQuery('.photos')
if (jQuery.fn.tilt) $container.tilt()

Help? 👍

PS: Awesome lib, thanks!

whenever I scroll superfast I get this error. Is there a fix for this?
tilt.jquery.min.js:1 Uncaught TypeError: Cannot read property 'x' of undefined
at HTMLDivElement.h (tilt.jquery.min.js:1)
at HTMLDivElement.g (tilt.jquery.min.js:1)

Thanks

Nearest objects cut the tile in Safari (10).

Hi, I was trying this plugin for designing a card block but i encounter a problem on mac safari, on following link, i created a demo to show the issue, when we hover on it, it overlaps and gave a cut on the image

https://codepen.io/hasanji/pen/bYdXwX

can you please help me with this issue ?

When I add 'transform: translateZ(20px)' to my inner elements, the elements will only popout when I hover it with my mouse. Is it possible to place the items correct when opening the website without having to hover it?

In this case, we will be able to trigger movement of the element when hovering over an element that is covering tilt element. Codepen example: https://codepen.io/Momciloo/pen/MOqaLN. If you uncomment text-overlay element in HTML, tilt doesn't work.

I would love to see this option implemented to make this more mobile-responsive. Right now, tapping on an object using tilt.js sometimes slightly changes the orientation and looks pretty bad and inconsistent on mobile, whereas allowing the device's orientation to control tilt would show the effect much better on mobile.

Is there any way to run that cool animation without hovering mouse over?

var btnMetro = $('<div style="transform-style: preserve-3d;background-color: red;" class="live-tile"><span class="tile-title" style="text-align:center;font-size: 18px;">'+this.displayName+'</span><img class="full" style="transform: translateZ(50px) translateY(-55%) translateX(-50%);width: 96px;height: 96px;position: absolute;left: 50%;top: 50%;" src="'+this.icon+'"/></div>');

btnMetro.click(function(){
	self.run();
});
$(btnMetro).tilt({
		glare: true,
		perspective: 100,
		maxGlare: .5
});
$(document.body).append(btnMetro);

I need help to make it work in image inside

Hello. Thanks for the awesome project.

Is there any way in which we can apply glare to images or SVGs?

The cdn you provide: https://unpkg.com/[email protected]/dest/tilt.jquery.min.js
is coming up with this response:
"Not found: file "/dest/tilt.jquery.min.js" in package [email protected]"

Hi,
when somebody use zoom-out (ctrl + scroll down) and then use tilt object It cause problems with size because effect of "parallax" is many times bigger then It should be.

Is it possible to somehow prevent this problem?

Thank you

(Tried on chrome)

Hi there,

Absolutely fantastic effect! I have one request, that exists in the Vanilla Tilt.js documentation, but doesn't seem to be included in the jQuery Tilt.js That functionality is "Reverse tilt". On the Vanilla Tilt.js you can reverse the tilt direction by adding data-tilt-reverse="true", however this doesn't seem to be working in jQuery Tilt.js, unless I am mistaken.

I would love this feature!

This is not really an issue but something which i thought worth sharing.

I'm not quite sure about Apple TV hover effect but just psychologically when the mouse hovers on a point it should apply (imaginary) weight of the pointer and push that point that side down instead of up.

maybe you can consider having an option that can reverse the effect.

Hi,
I'm trying to add parallax effect to a portfolio gallery items. I activate data-tilt on the main container and inside of it there are thumbnails, overlay, title etc, which are all nested inside each other. I set the main container to transform-style: preserve-3d; and set following nested child elements to transform: translateZ(50px); but it doesn't seem to be working, there is no parallax effect going on.

The only way I could make it work was by using data-tilt on one of the pre-last nested child elements and only in that case the last child inside of it actually had parallax working. So it looks like parallax refuses to work if there are more than one child elements inside of main data-tilt container. Tilt.js parallax samples all have only one element nested inside as well, proving my guesses.

Could you please take a look at that issue and maybe give a hint how to add parallax to all (or some) nested child elements?

Thank you

Hey !
Nice job! I like this plugin.

Can you add an invert option just like this one??
https://github.com/ariona/hover3d

I feel more natural about the tilt effect of the above plugin.
But your plugin works more smoothly, and no need to write CSS manually. so I picked yours♥
How do you think?

When the windows is resized the glare height & width need to be recalculated.

I would be over the moon stoked if someone could possibly help me add this to a joomla site.

Hi,

Tihs library is amazing, simply amazing! However I have a question: I would like an image inside the page to be tilted when the mouse moves over the page (not the image itself). While the user moves the mouse over the page from left to right I would like the image to tilt accordingly.

is it possible? Many parallax libraries allow this to happen, would it be possible with this library?

Hi, I noticed that the mouse events are wrong on the documentation:

tilt.on('tilt.mouseLeave', callback);
tilt.on('tilt.mouseEnter', callback);

Is in fact:

tilt.on('tilt.mouseleave', callback);
tilt.on('tilt.mouseenter', callback);

Sorry if this is obvious – I just didn't notice it straight away :)

Might be helpful for both projects :)
micku7zu/vanilla-tilt.js#23

Hello, Inspired by your repo, I build a Polymer component polymer-tilt (based Polymer2) and upload it to webcomponents.org.

Thank you! 😋

I'm trying to use the destroy key in a media query to disable the effect on mobile devices, but I just can't get it right. Can someone provide the correct code for a media query to disable on certain size and re-enable on another size?

Thanks in advance!

Hello, I've got some strange behavior of the reset method. This is my code:
const tilt = $('.js-tilt').tilt({ scale: 1.05 });
Everything works well, scaling is used on mouse-hover event, but when I'm trying to reset my tilt with this code:
tilt.tilt.reset.call(tilt);
sometimes (mainly in firefox, but sometimes in chrome too) it is resetting js-tilt element and scaling it for some reason I don't know. Please check this fiddle in firefox and try to run it several times: https://jsfiddle.net/c5jtsutb/
It could be fixed by some weird methods like resetting the css-transform property after timer, but its really ugly solution..

Hi, it's not documented, but I was wondering what accessibility concerns (if any) there are with using tilt.js?

If there are any or not, it may be worth stating this on the documentation for reassurance. 🙂

The glare appears as a rotating white square on tall divs.

I'm testing with a block with a height of 600 and a width of 280px. also happens on 600 x 100, 600x 200 etc.

I believe it is caused because the size of the "js-tilt-glare-inner" is calculated based on the width of the element and does not take into consideration the height of the element.

Thanks.

First of all nice work!
Can you make tilt.js installable via bower?

https://bower.io/docs/creating-packages/

Wondering if its possible to implement a delay or add easing to the tilt effect.

See how http://thexx.info/home/ works for an example.

Found one more bug.. :(

When I was debugging my site using F12 and resizing that page this fast I found another bug here. Glare seems broken sometimes after quick resizes and you can see actual white square. Here is picture:

See that white square? Yeah.. Thats not cool..

Hi, good job with Tilt, I really liked, but I have an question, do you plan a version without jquery dependency?

✌️

This would be a nice option to have.

Thanks

I'm kinda new to programming and I don't know how to make or if I should make Responsive Web Page to ALL DEVICES. Is it necessary or is there another method? How do I make it Responsive for landscape and portrait? Thanks in advance!