"TypeError: undefined is not an object" in Safari only?

[JulieAutobots]

Hey there, GSAP noob here. I've messed around with it for a few tiny effects here and there, but haven't really incorporated it extensively in any projects... before now. Overall, really happy with GSAP's flexibility! But there's been a road bump, and I'm hoping someone could help point me in the right direction.

 

(Note: This code was cobbled together before the 3.2 release. I went through the documentation to see if there's anything that could help solve my problem, but I'm starting to see double)

 

I expanded on a parallax script I found here on the help forums to animate an svg graphic on mouse movement, with the main svg graphic animating position, some binary text staying locked in place, and a dashed line connecting the two. I got everything working great in chrome, and went on with developing the rest of the project. Today I was doing some browser compatibility tests, and realized the script is throwing some weird errors in Safari.

 

TypeError: undefined is not an object (evaluating 'polyline.points[1].x') on line 138

 

I'm not sure why this script would be working fine in Chrome but not Safari. Could someone with more GSAP know-how take a peek? Thank you in advance!

 

See the Pen ZEbLQmv?editors=1010 by julie-barkun (@julie-barkun) on CodePen

[ZachSaucier]

Hey Julie and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you.

 

It looks like Safari doesn't support SVGPoints. You can instead read directly from the attribute and convert that to an array to use:

const points = polyline.getAttribute("points").match(/[\d\.]+/g).map(Number);
gsap.to(polyline, {duration: 1, morphSVG: dot_position.x + " " + dot_position.y  + "," + points[2] + " " + points[3]});

See the Pen oNjBLpe?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

[OSUblake]

Safari supports SVGPoint. It's not an array, so you should use the appropriate method for an SVGPointList.

http://html5index.org/SVG - SVGPointList.html

https://developer.apple.com/documentation/webkitjs/svgpointlist

 

See the Pen 064ffdb32643102f80643ae4d2e001fa by osublake (@osublake) on CodePen

 

 

[JulieAutobots]

Thank you Zach and Blake! You guys are amazing. I understand the problem better now, and Zach's solution works perfectly. Looking forward to working with gsap more in the future!

[OSUblake]

Did you try to use getItem(1) instead of [1]?

 

const point = polyline.points.getItem(1);

gsap.to(polyline, {duration: 1, morphSVG: dot_position.x + " " + dot_position.y  + "," + point.x + " " + point.y});