Jump to content


GSAP Displacement doesn't work in Safari

Recommended Posts

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

Link to comment
Share on other sites

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: 


Does that resolve things for you? 

  • Like 4
Link to comment
Share on other sites

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!! :)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.