Browser Support Issue with TweenMax

[apautler]

I am using TweenMax for some animations. The animations work fine in Chrome, but Safari and Firefox both have issues with the center animation. I though GSAP removed those browser issues, so I am thinking I must be doing something wrong. Any help would be appreciated.

Thanks!

See the Pen xEkwvR by apautler (@apautler) on CodePen

[Jonathan]

Hello apautler, and Welcome to the GreenSock forum!

Thank you for the example, very helpful

 

The codepen is asking for a username and password via a HTACCESS password prompt for the MorphSVGPlugin to work.

 

To use in codepen just use this codepen only MorphSVGPlugin url:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js

I did not see your issue on Windows 7 and Windows 10 in latest Firefox.

 

I believe this is a Safari and Firefox on Apple computer bug that you are seeing.

• Meanwhile what is the Apple device's OS version and Safari version?

It might have to do with the transformOrigin since they are SVG elements. Please look here regarding the svgOrigin which is part of the GSAP CSSPlugin since you are using SVG.

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

• svgOrigin
  [Only for SVG elements] Works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. You can either define an svgOrigin or a transformOrigin, not both (for obvious reasons). So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. Units are not required. It also records the value in a data-svg-origin attribute so that it can be parsed back in. svgOrigin doesn't accommodate percentage-based values.

  See the Pen 06716224865c2c536cee5b4222d771ee by GreenSock (@GreenSock) on CodePen

  .

Please standby while we try to offer a solution, so we can see why this is happening.

 

Thanks!

[apautler]

Sorry about the file issue. I just switched out the path, so that should be working now. The issue is on Apple Safari and my iPhone 6. I have not tested further than that at this point. Thanks!

[Carl]

Thanks for the demo. It's best to just include enough JS and SVG info to clearly illustrate the issue. 

 

It seems for now that this has to do with your use of clipPath and Firefox's dislike for it.

Please see the video here: http://greensock.com/forums-support-files/svg-clipPath.mp4

 

You will see that the values are definitely being animated properly and the element is actually moving according to the web inspector its just that FireFox refuses to render the updates. Yes, GSAP jumps through a lot of hoops to avoid browser inconsistencies but there is nothing we can do the browser refuses to render what we tell it to.  It seems Safari may be having a similar struggle.

 

There have been a few reports on clipPath issues with FireFox and some workarounds:

 

http://greensock.com/forums/topic/12062-masking-with-clippath-and-svg/

http://greensock.com/forums/topic/12272-animating-svg-masks-clip-path-not-working-in-firefox/

 

For your situation can't you just move the colored wavy shape up instead of moving a mask shape up?

[Jonathan]

Just to add what Carl has said. Firefox has clip-path listed as not support due to a bug.

 

https://bugzilla.mozilla.org/show_bug.cgi?id=1246741

 

Safari is also up in the air as far as support for css-path. Especially since your using the url() function for clip-path which has been buggy for many years. Even before when it was only just the clip CSS property which is now deprecated.

 

GSAP is awesome at working around various browser bugs. But in this case it's more of the browser either not supporting clip-path or only having partial support which is a code word for "bug city not worky". So using a SVG mask like Carl advised above is a better cross browser solution.

 

Resource:

CSS clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

 

[GreenSock]

Actually, I poked around and I think there's another thing at play here. I noticed you set transforms via CSS in 3 different places, but SVG is a bit tricky in that transforms are technically supposed to be set via a "transform" attribute (not CSS property), but some browsers have gone beyond the spec and supported both. So ALL browsers support the transform attribute, but only SOME support CSS transforms. Again, the spec says you should use the attribute. I recommend likewise.

 

When I got rid of your CSS transforms and applied them in the transform attribute instead, things seemed to work fine. 

http://codepen.io/GreenSock/pen/4b2384c42b7f3c2b62bd8d4726bb51d0/

 

Is that better for you? 

 

And yeah, masking/clipping support is pretty spotty in browsers (at least when it comes to animating them). Quite a few browsers simply don't render changes even though you can clearly see that GSAP is correctly applying the values in the DOM/inspector. We work very hard to get around bugs, as Carl/Jonathan said, but unfortunately we can't work miracles and solve every browser bug. In this case, though, from what I can tell it should be as easy as applying the transforms to the attribute instead of CSS. 

[apautler]

Jack, Jonathan and Carl, thanks so much for all your help. Jack's post fixed the issue and is exactly what I am looking for. I appreciate you helping out. I'm just getting into animations with SVG and still am learning a lot!

[GreenSock]

Excellent, I'm glad to hear that helped. And welcome to the "I'm still learning" club. I'm a perennial member myself. Feel free to bring your questions here - we really try to cultivate a positive culture that doesn't shame people for not knowing stuff or asking "dumb" questions (no such thing in my opinion). These browser/SVG/animation things can be pretty complex. 

 

Happy tweening!

[apautler]

I know this was resolved a week or two ago, but there seems to be issues that have cropped up again. I've essentially duplicated the content from the Codepen (where it works) into the site here: https://sleepsalt.wpengine.com/science/. Now the left diagram doesn't seem to be working in Safari or mobile Safari. It is working in Firefox though. Anything that you can think of that would cause it not to work within the site framework? I am not seeing an JS errors or anything else that would indicate what is happening. Thanks!

[GreenSock]

It looks like GSAP is animating the values exactly as expected (check Dev Tools), but Safari isn't rendering things properly to the screen. It's pretty tough to diagnose on a live site, as there are a lot of variables and it's very awkward to try to change things and experiment, but I did notice something pretty odd (which may just be a glitch in  Dev Tools): if I removed the font-size:1.2em rule you put on the <body>, it suddenly started working. Again, I don't have good reason to believe that's a true fix - it just made things kick in when playing around in Dev Tools. Does that solve things for you? (It'd be so strange if it did)

[apautler]

Isn't that strange?! The thing is, when I remove the font-size property from actually within the CSS and reload the page, the animation still doesn't work. Then if I remove say 'line-height' from the body element within Dev Tools it starts to work. It has to be a bug/glitch, don't you think? Any other ideas what might be causing it? If not, I may have to concede defeat and have it just not work in limited versions of Safari and mobile Safari. 

[GreenSock]

Have you tried un-nesting that <path> from the group? I'm not quite sure why you've got it inside a <g> element, and maybe Safari doesn't like having the mask applied to the <g> (which would be silly, of course). And yeah, there's no doubt this is a Safari bug. Browser support for animated masks in SVG is kinda spotty. I wish there was a magical fix we could apply. If I were you, I'd just experiment with a ton of things (like removing that <g>). Another thing that I've seen trigger repaints properly is animating the fill color (even slightly). It's like it wakes up the browser and says "hey, you better re-render this element."