TweenMax (SVG animation) and Android System Webview

[malua]

hello,
 
we are using tweenmax for a simple svg animation in an cordova app. the animation is working fine on ios but not on android. on android the "transform" isnt added to the "style" attribute, but as an own attribute. and i think the reason for that is this code line:
 

var force = _ieVers || (/Android/i.test(_agent) && !window.chrome)

the 'force' variable, forces the use of transform as an attribute. And on android, (/Android/i.test(_agent) always returns true. _agent being the user agent of the browser.
 
there is comment before the code line:

//IE and Android stock don't support CSS transforms on SVG elements, so we must write them to the "transform" attribute. We populate this variable in the _parseTransform() method, and only if/when we come across an SVG element

this is exactly what is happening. and the problem is the android system webview doesn't identify as a chrome browser with window.chrome.
 
is this something that could be changed? or do you have any other ideas?
help is much appreciated!

[Dipscom]

Hi malua,

 

I'm not familiar with cordova to comment but rest assured this will be passed onto the right people to have a look.

 

Just give them some time to go over it and someone will come back to you with an official response asap.

 

Thanks

[Jonathan]

Hello malua, and Welcome to the GreenSock Forum!

 

Sorry your having an issue!

• Do you have a code example?
• What does the tween look like?
• How are you passing transform, as string or as a short property like x, y, z?

Without seeing your code or an example it will be really hard to even know what is happening or why. Just a limited codepen example so we can see the expected behavior.

 

 

Thanks! This way we can better help you

[Oliver16Years]

hi Maula,

 

I had this CSS on SVG problem before. I wasn't able to tween clip or mask tags with css or attribute animation. Then I wrote a GSAP tranform plugin, which can tween rotation, scaleX, scaleY, centerX, centerY, skewX, skewY, translateX, translateY. PM me if You are interrested. I posted here earlier but noone answered or liked it, so i removed it
 

[GreenSock]

@malua, I've got a few questions for you:

1. Why would it be problematic to have the transforms applied via the "transform" attribute (instead of CSS)? That's actually what the SVG spec calls for, plus we've found it to be much more reliable (there are various bugs in Safari when transforms are applied to SVG via CSS, and IE offers zero support for that, etc.)
2. What version of GSAP are you using? I can't find that line of code that you referenced anywhere in the current version. 
3. Do you have any way to reproduce it without cordova? I'm not a Cordova guy, so I'm not able to test that but if you could provide a reduced test case in a regular browser, that'd be super helpful. 

@Oliver, I'm curious about the plugin you mentioned - if you couldn't apply transforms via CSS nor the attribute, how were you doing it?

[Oliver16Years]

@Jack, I am assembling a transfrom attribute value by chaining all the necessary transfroms and setting them. IE and FF not updating the CSS tweened masks and clip paths. I didn't spent much time developing it, and at the moment it depends on a ".layout" attribute of the DOM elements, which I set previously.

See the Pen qRZorJ?editors=0010 by oliver15years (@oliver15years) on CodePen

I am glad You are interrested in it.   Forgive me my noobness. I would really appreciate Your advices, how to make it professional.
 

[GreenSock]

Thanks Oliver. Would you mind also providing a reduced test case that shows GSAP's regular CSSPlugin not working properly where your plugin would? That'd be super helpful. Oh, and please use the beta of the next release of TweenMax: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js (I didn't make any special changes related to this - I just want to make sure you're using the latest). Thanks!

[javlc.dev]

Hello, on behalf of malua, here is the requested pen,

The code sets the svg inner elements to absolute positioning, then the transforms are being passed as a short property (x, y).

 

See the Pen XpdPmo by FrontRunnerUp (@FrontRunnerUp) on CodePen

 

Edit: One way to check the issue is by using Google Chrome (In Windows 10 at least), open dev tools, and toggling the device toolbar, to view in different mobile devices, particularly the Samsung ones.

[Oliver16Years]

Great! With the latest beta, it's working.

1.19:

See the Pen kkvzKN by oliver15years (@oliver15years) on CodePen

Latest Beta:

See the Pen kkvzKN by oliver15years (@oliver15years) on CodePen

 

Maybe You changed something else which is affecting SVG masks. Anyway, this gonna be perfect when we can CDN link it.

Do You know when will Google host this version?

[Jonathan]

Hello javlc.dev ... keep in mind that in SVG CSS position absolute .. position offsets do not apply to SVG elements. By their very nature SVG child elements are positioned like absolute positioned elements using a coordinate system like canvas. But dont use CSS position absolute or relative.

 

SVG by default only uses one coordinate system. So basically each SVG child elements are placed absolutely relative to the position of the SVG viewbox. SVG elements do not use the CSS box model. So CSS position offsets like top and left have no bearing on SVG positioning.

 

The only way to have SVG be responsive fully is to use nested SVGs to fake a different coordinate system.

 

This article might help clear things up'

 

https://sarasoueidan.com/blog/svg-coordinate-systems/

 

Happy Tweening

[GreenSock]

@Oliver, very happy to hear that 1.19.1 is working well for you and does away with the need for the other plugin.

 

I'm not sure when Google will host the upcoming version, no. Hopefully very soon after we release, but as with most very large organizations, it might take some time to make it through all the proper channels there. I'd definitely recommend reaching out to them to let them know that you really want it so that they can gauge demand. 

 

We're aiming to release it by the end of next week. 

[Oliver16Years]

Google is so large, they can't even solve anything. I have several open issues since months with replies like:

- Oh really?!
- You are stupid, how dare You reported this issue!
- We are really sorry, workaround the problem in 15 more steps.
- This issue is so little, we don't even move our little finger.

- Use Chrome 49, that is working.
 

No, I wont report anything to or ask anything from Google.
 

[javlc.dev]

Hello javlc.dev ... keep in mind that in SVG CSS position absolute .. position offsets do not apply to SVG elements. By their very nature SVG child elements are positioned like absolute positioned elements using a coordinate system like canvas. But dont use CSS position absolute or relative.

 

SVG by default only uses one coordinate system. So basically each SVG child elements are placed absolutely relative to the position of the SVG viewbox. SVG elements do not use the CSS box model. So CSS position offsets like top and left have no bearing on SVG positioning.

 

The only way to have SVG be responsive fully is to use nested SVGs to fake a different coordinate system.

 

This article might help clear things up'

 

https://sarasoueidan.com/blog/svg-coordinate-systems/

 

Happy Tweening

 

Thank you for replying Jonathan,

I did re-read the material given (I had read the same a while ago).

Nevertheless I wanted to mention that the issue is not the responsiveness of the svg element, nor its exclusive usage of the svg coordinate system, but the application of the transform translate values.

I think @malua user has pointed the issue rather well: The animations/tweens' transforms need to be applied as css style rather than in the svg transform svg attribute, when using the particular user agent value that the Android Cordova wrapper is using.

 

Also, did you see the particular animation given in the codepen link: 

See the Pen XpdPmo by FrontRunnerUp (@FrontRunnerUp) on CodePen

?

 

I had that working fine in Chrome browser, but for example, does not work in Safari browser within iPhone 6 (just like within the Cordova wrapper mentioned by malua).

[GreenSock]

Hm, the reasons GSAP applies transforms to the "transform" attribute on SVG elements instead of the CSS styles are:

1. That's what the SVG spec calls for
2. IE offers zero support for CSS-based transforms on SVG
3. Various other browsers have buggy behavior when applied via CSS. Safari, Firefox, and Chrome all have quirks. We've found that the most consistent behavior is delivered via the "transform" attribute.  

For the record, we actually originally did it all at the CSS level except for IE, but then more and more issues were popping up and we discovered that it was just smarter (well, more bulletproof) to follow the SVG spec and apply it to the "transform" attribute accordingly, so we've shifted that direction in more recent releases. I'm very surprised to hear that Cordova goes against the spec and expects you to apply things via CSS instead of the transform attribute. Is that correct? Or did I misunderstand what you were saying?

[GreenSock]

I looked at your example in Safari and I think the problem is that you're trying to set some values via CSS that aren't "legal", like "cx" and "cy" (those are attributes, not CSS properties). Also, it's always best to set transform-related stuff directly through GSAP so that it understands your intent, especially with percentage-based values because when GSAP gets the computed style on an element (to snag the starting values), the browser always spits back px-based values. So it's impossible for GSAP to know that you wanted transform: translate(-50%,-50%). The browser translates it to px. 

 

So if you just remove the cx/cy/transform in the CSS rule and add this line before you do your tweening, it seems to work (at least in my Safari test):

TweenMax.set(".container.svgs svg circle", {attr:{cx:"50%", cy:"50%"}, xPercent:-50, yPercent:-50});

Does that help?