tilt.js icon indicating copy to clipboard operation
tilt.js copied to clipboard

Uncaught TypeError: Cannot read property 'x' of undefined

Open justrealmilk opened this issue 5 years ago • 20 comments

justrealmilk avatar Aug 17 '18 07:08 justrealmilk

I have the same issue.

brograhamer avatar Sep 06 '18 14:09 brograhamer

Same here too

bumper-yusuf-ozunlu avatar Oct 29 '18 09:10 bumper-yusuf-ozunlu

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

gijsroge avatar Oct 29 '18 10:10 gijsroge

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

e2d060a1fde9a330f06d730476332e1d

vrockcm avatar Dec 31 '18 04:12 vrockcm

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

gijsroge avatar Dec 31 '18 08:12 gijsroge

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

vrockcm avatar Dec 31 '18 09:12 vrockcm

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

vrockcm avatar Dec 31 '18 20:12 vrockcm

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.

LachieKimber avatar Mar 28 '19 00:03 LachieKimber

Any updates on the issue? I get the same error

stilltli avatar Apr 18 '19 09:04 stilltli

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

Hackinet avatar Jul 02 '19 00:07 Hackinet

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

batata004 avatar Jul 06 '19 15:07 batata004

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

PowerMostafa avatar Sep 02 '19 07:09 PowerMostafa

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

juli2a avatar Dec 20 '19 12:12 juli2a

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

diabysidim avatar Mar 10 '20 02:03 diabysidim

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.

toddpadwick avatar Mar 21 '20 17:03 toddpadwick

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!

MaksymJ avatar Jun 01 '20 11:06 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};
        }

Where should i put this code?

ali-vs avatar Jun 18 '20 13:06 ali-vs

I have the same issue :(

bmrafiq avatar Jul 24 '20 15:07 bmrafiq

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

bmrafiq avatar Jul 24 '20 16:07 bmrafiq

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

jonathanarbely avatar Feb 07 '21 12:02 jonathanarbely