GSAP Displacement doesn't work in Safari

[soupking 6 Likes (Newbie)]

Hi everybody,

 

Full disclaimer, this is my first code pen so that might be the problem. I also don't know how to inspect in Safari. I typically do all that in Chrome, but it's not throwing any errors.

 

I haven't the foggiest why it's not working. Is there something obvious I'm missing?

See the Pen WmOayW by soupking (@soupking) on CodePen

[GreenSock 8,117 Likes (Superhero)]

It looks like you've just got the wrong SVG syntax - your image is supposed to have an xlink:href="..." attribute, not just href="...". 

 

You were also loading a SUUUUUPER old version fo GSAP. I'd recommend loading the latest. But beware that a recent performance optimization limits decimals to 3 places and your demo is a very unusual case where you'd notice a visual difference with that level of precision, so you can just use an onUpdate to apply the value yourself and round to whatever amount of decimal places that you want, as I demonstrate here: 

See the Pen 91b57c57ffbfca724ff40aa6def4b69e?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that resolve things for you? 

[soupking 6 Likes (Newbie)]

On 3/9/2019 at 8:58 PM, GreenSock said:

 

Does that resolve things for you? 

 

Yes!! More than I was hoping for. I never would have found that syntax error. I'm a real dunce with SVG and try to find alternatives any way I can, but with displacement...there's just no way around it. 

 

I also had no idea I was using a borderline deprecated version of GSAP, I'll switch that out asap. 

 

Thanks so much Jack!!