OllIO Posted December 20, 2023 Share Posted December 20, 2023 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 20, 2023 Share Posted December 20, 2023 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). 1 Link to comment Share on other sites More sharing options...
OllIO Posted December 20, 2023 Author Share Posted December 20, 2023 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! Link to comment Share on other sites More sharing options...
ryan_labar Posted December 20, 2023 Share Posted December 20, 2023 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. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted December 20, 2023 Share Posted December 20, 2023 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. Link to comment Share on other sites More sharing options...
ryan_labar Posted December 20, 2023 Share Posted December 20, 2023 13 minutes ago, GreenSock said: Safari Nor is FireFox 1 Link to comment Share on other sites More sharing options...
OllIO Posted December 21, 2023 Author Share Posted December 21, 2023 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! 1 Link to comment Share on other sites More sharing options...
Solution OllIO Posted December 21, 2023 Author Solution Share Posted December 21, 2023 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now