Uncaught TypeError: Cannot read property 'x' of undefined

[gijsroge]

Uncaught TypeError: Cannot read property 'x' of undefined

[juli2a]

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

[diabysidim]

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};
        }

[Hackinet]

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.
});

[batata004]

No update into this? This bug still happens in JUL/2019!

[jonathanarbely]

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){}

[vrockcm]

https://gyazo.com/16e39433f8684cf0bf75bad42207f70e
It only happens when you are scrolling for some reason.

[brograhamer]

I have the same issue.

[bumper-yusuf-ozunlu]

Same here too

[gijsroge]

Please provide a demo showing this issue. Either by Codepen, jsfiddle, anything really.. :)

[gijsroge]

@vrockcm thanks but please read my previous reply. Thanks!

[vrockcm]

I tried to do it in jsfiddle but the error didn't pop up. Ill try codepen and see what happens tomorrow. 🙂

[vrockcm]

https://codepen.io/anon/pen/oJoMRJ
Here you go.

[LachieKimber]

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.

[stilltli]

Any updates on the issue? I get the same error

[PowerMostafa]

I fix it by this way I hope it works
<div data-tilt-axis="x" ></div>

[toddpadwick]

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.

[MaksymJ]

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!

[ali-vs]

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?

[bmrafiq]

I have the same issue :(

[bmrafiq]

@diabysidim thank you. Your solution is worked for me.