Jump to content
GreenSock

RaoulUnger

svg-clip-path animation problem in Safari

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

I'm trying to animate a SVG clip-path masking an image in such a way that it will work in all browers, including IE. I'm using Greensock because 'normal' css-animation on clip-paths doesn't work at all in IE. I've defined two paths within one clipPath, and animated them separately (different speeds). The included method seems to work in all browers, but there is one problem: Safari shows erratic behaviour: the bottom part of the circle often isn't drawn. Weirdly enough, it does draw when I 'inspect' the element to look at the code.

 

In the pen you see the animated image on the left, and the entire image for reference on the right. The image is png with the parts outside the circle being transparent.


Any thoughts would be appreciated!!

I'm very new at Greensock, so please forgive me for not seeing the obvious...

Thanks!

See the Pen rbdpdp by RaoulUnger (@RaoulUnger) on CodePen

Link to comment
Share on other sites

Yeah, Safari has quite a few really weird rendering bugs (totally unrelated to GSAP). Sometimes you've gotta "trick" it. In this case, it looks like it's creating a bounding box for the clip-path initially and never updating it as the transforms get applied. So I'd just add a <rect> in your <clipPath> so that it opens up that area. Here's a fork: 

See the Pen 501dc1ba55a0cceb854f72d9377bdc8e by GreenSock (@GreenSock) on CodePen

 

Also, I'd probably follow the spec and have the clipPath defined as an attribute but that may not be a big deal. 

  • Like 2
Link to comment
Share on other sites

Thanks for the answer! I updated my code with yours. You were right about the attribute-definition.
I can see that the trick of the rectangle works in de codepen viewed in Safari. Weirdly enough, the same trick doesn't seem to work on the webpage where i'm testing the exact same code (again viewed in Safari):

 

http://decamerone.info/test-greensock-werkt/

It get's weirder: that same page works fine in Chrome and Firefox (both on a mac and in windows), but your codepen doesn't animate in Firefox...

Cheers!

 

Link to comment
Share on other sites

The problem in Firefox is that demo is using an old version of GSAP (1.18.0). If you switch to the latest version (2.1.2), it works correctly in FF for me. Happy tweening.

  • Like 1
Link to comment
Share on other sites

Ok, thanks!
The webpage version works now too, that was due to the page not having been saved (my mistake).

Cheers!

  • Like 1
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.
×