tilt.js
tilt.js copied to clipboard
Uncaught TypeError: Cannot read property 'x' of undefined
I have the same issue.
Same here too
Please provide a demo showing this issue. Either by Codepen, jsfiddle, anything really.. :)
https://gyazo.com/16e39433f8684cf0bf75bad42207f70e It only happens when you are scrolling for some reason.
@vrockcm thanks but please read my previous reply. Thanks!
I tried to do it in jsfiddle but the error didn't pop up. Ill try codepen and see what happens tomorrow. 🙂
https://codepen.io/anon/pen/oJoMRJ Here you go.
I can't replicate the issue intentionally, but yes the issue happens to me. The error prevents the element that caused the tilt issue to no longer tilt. I even managed to somehow replicate the issue in the above codepen.
Any updates on the issue? I get the same error
Well, I just disabled the X-axis. Tbh the change in effect isn't even much noticeable.
$('.someClass').tilt({
maxTilt: 10,
disableAxis: 'X', // What axis should be disabled. Can be X or Y.
});
No update into this? This bug still happens in JUL/2019!
I fix it by this way I hope it works
<div data-tilt-axis="x" ></div>
This error appears if you didn't moving a mouse over a tilt element before, and you are scrolling a page and cursor is over the tilt element, and then leaves it, without moving of mouse. In this case the tilt effect doesn't work only on this element
Go to your file src/tilt.jquery.js Check if this.mousePositions is null just like this.
if(this.mousePositions){
const percentageX = (this.mousePositions.x - left) / width;
const percentageY = (this.mousePositions.y - top) / height;
// x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value
const tiltX = ((this.settings.maxTilt / 2) - ((percentageX) * this.settings.maxTilt)).toFixed(2);
const tiltY = (((percentageY) * this.settings.maxTilt) - (this.settings.maxTilt / 2)).toFixed(2);
// angle
const angle = Math.atan2(this.mousePositions.x - (left+width/2),- (this.mousePositions.y - (top+height/2)) )*(180/Math.PI);
// Return x & y tilt values
return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle};
}
I get the same issue, when scrolling, if the mouse ends up over an element, it triggers an error blocking the script from re-running on that element even when the mouse starts moving again.
Go to your file src/tilt.jquery.js Check if this.mousePositions is null just like this.
if(this.mousePositions){
const percentageX = (this.mousePositions.x - left) / width; const percentageY = (this.mousePositions.y - top) / height; // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value const tiltX = ((this.settings.maxTilt / 2) - ((percentageX) * this.settings.maxTilt)).toFixed(2); const tiltY = (((percentageY) * this.settings.maxTilt) - (this.settings.maxTilt / 2)).toFixed(2); // angle const angle = Math.atan2(this.mousePositions.x - (left+width/2),- (this.mousePositions.y - (top+height/2)) )*(180/Math.PI); // Return x & y tilt values return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle}; }
thank you so much, that solves this small issue!
Go to your file src/tilt.jquery.js Check if this.mousePositions is null just like this.
if(this.mousePositions){
const percentageX = (this.mousePositions.x - left) / width; const percentageY = (this.mousePositions.y - top) / height; // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value const tiltX = ((this.settings.maxTilt / 2) - ((percentageX) * this.settings.maxTilt)).toFixed(2); const tiltY = (((percentageY) * this.settings.maxTilt) - (this.settings.maxTilt / 2)).toFixed(2); // angle const angle = Math.atan2(this.mousePositions.x - (left+width/2),- (this.mousePositions.y - (top+height/2)) )*(180/Math.PI); // Return x & y tilt values return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle}; }
Where should i put this code?
I have the same issue :(
@diabysidim thank you. Your solution is worked for me.
Put the whole block in a try/catch:
try {
const percentageX = (this.mousePositions.x - left) / width;
const percentageY = (this.mousePositions.y - top) / height;
// x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value
const tiltX = ((this.settings.maxTilt / 2) - ((percentageX) * this.settings.maxTilt)).toFixed(2);
const tiltY = (((percentageY) * this.settings.maxTilt) - (this.settings.maxTilt / 2)).toFixed(2);
// angle
const angle = Math.atan2(this.mousePositions.x - (left+width/2),- (this.mousePositions.y - (top+height/2)) )*(180/Math.PI);
// Return x & y tilt values
return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle};
} catch(e){}