Gsap Pathanimation not working in iOS

[OllIO]

My animation works on all common Browsers except for iOS (testet on iPhone 12 iOS 16.1.1, Safari, Chrome, Firefox)
Any ideas?

Thanks!

 

See the Pen BabBrQx by ollio (@ollio) on CodePen

[mvaneijgen]

Hi @OllIO welcome to the forum!

 

It also doesn't work on macOS Safari version 17. There is a lot happening in your pen, but I think your issue is with the strokeDasharray? We have a plugin called DrawSVG which fixes almost all inconsistencies between browsers and gives you a really easy way to animate a stroke from to any point. Check it out https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/ This will probably fix the issues you're having.

 

If you want to keep your setup as is could you maybe reduce your demo to just one tween (or the minimum) that demonstrates the issue, we don't need your whole animation, just the relevant parts so that we can help you debug (if that is possible). 

[OllIO]

Actually the strokeDasharray animation is the only thing working on iOS .
But all the circles are not showing up, even the non-animated. Perhaps the problem is not gsap but something else like working with css variables. 
I will test this and i will also cleanup the codepen!

 

Thanks for the help!

[ryan_labar]

I'm not sure that SVG can accept CSS custom properties in non-css-editable attributes, like `r`, or, if that's part of the spec, most browser's aren't sure what to do with it yet.

[GreenSock]

Yeah, as far as I can tell GSAP is doing exactly what you're asking it to do (animating the proper values); it seems like a browser thing, like Safari isn't capable of recognizing/rendering those value changes. 

[ryan_labar]

13 minutes ago, GreenSock said:

Safari

Nor is FireFox

[OllIO]

17 hours ago, ryan_labar said:

I'm not sure that SVG can accept CSS custom properties in non-css-editable attributes, like `r`, or, if that's part of the spec, most browser's aren't sure what to do with it yet.

Yes, that is exactly the reason. Seems you cannot use custom properties for the circle radius on Safari. So not a gsap problem 

 

thanks for your help guys!

[OllIO]

Hm. Just found this:

https://cloudfour.com/thinks/so-you-can-set-an-svg-circles-radius-in-css/

 

so you can use custom properties for the radius.

 

—radius: 5 is not working but —radius: 5px does