lw1990 Posted February 25, 2020 Share Posted February 25, 2020 Hello, I'm new to GSAP and I'm considering creating a PWA (progressive web app) that runs on web and mobile devices using SVG animations, my question is would animated GSAP SVGs, where I grab ID's of svg elements using GSAP and animate them that way, work on mobile devices? I found a codepen tutorial that stated GSAP SVG animations do not work on mobile devices back in 2016, just trying to verify this or see if it's changed. The relevant text is highlighted in grey in the screenclip below. The codepen source: https://codepen.io/gregh/post/create-svg-game-coloron See the Pen create-svg-game-coloron by gregh (@gregh) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 25, 2020 Share Posted February 25, 2020 34 minutes ago, lw1990 said: my question is would animated GSAP SVGs, where I grab ID's of svg elements using GSAP and animate them that way, work on mobile devices? GSAP does not require IDs. It would be quite limiting if it did. If an animation does not work on mobile, then it's probably a logic problem completely unrelated to gsap. 37 minutes ago, lw1990 said: I found a codepen tutorial that stated GSAP SVG animations do not work on mobile devices back in 2016, just trying to verify this or see if it's changed. I have no idea why he said that because it's just... It's almost laughably wrong. You've always been able to animate SVG with GSAP inside any browser that supports SVG, mobile or desktop. And yes, even as a PWA. 7 Link to comment Share on other sites More sharing options...
lw1990 Posted February 25, 2020 Author Share Posted February 25, 2020 Thanks for the response, I think he must have meant that the performance slows the phone to a halt, or overheats it, when the animations aren't done on static svgs wrapped in divs. I've been searching on this forum and found several posts, even some by you, that also repeats his instructions to put SVG's in divs and animate the divs, rather than directly animate the svgs, to improve performance on mobile. I guess the question is how important this really is though. Link to comment Share on other sites More sharing options...
OSUblake Posted February 25, 2020 Share Posted February 25, 2020 2 hours ago, lw1990 said: Thanks for the response, I think he must have meant that the performance slows the phone to a halt, or overheats it, etc. Perhaps, although I do see in his code that he disables some animations for mobile. On line ~142. // disables scene animations for Phones if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent) ) { Animation.sceneAnimation(); } 2 hours ago, lw1990 said: I've been searching on this forum and found several posts, even some by you, that also repeats his instructions to put SVG's in divs and animate the divs, rather than directly animate the svgs, to improve performance on mobile. I guess the question is how important this really is though. It really depends on how bad the performance is. Putting SVGs inside a div can really help if you are doing transforms, like changing the position, rotation, or scale of an element. If you're doing an SVG animation that requires morphing or drawing a stroke, then putting it inside a div probably won't help out that much if your artwork is simple. Another problem with putting SVGs inside a div is that it might be hard to align stuff properly for responsiveness. So it really depends on what you are doing. There is no is hard rule. My approach would be Try it out with everything inside an SVG If that doesn't work, try putting stuff inside a divs If that doesn't work, try simplifying your artwork and animations, and redo the steps above If that doesn't work, it's time to brush on your canvas/webgl skills 😉 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 25, 2020 Share Posted February 25, 2020 If you share with us your end goal (maybe even a mockup!) then we might be able to tell you beforehand if it's not a good fit for SVG. But as Blake said, GSAP can definitely animate SVGs performantly on mobile - we do it all the time. 2 Link to comment Share on other sites More sharing options...
NickWoodward Posted October 29, 2021 Share Posted October 29, 2021 On 2/25/2020 at 8:15 AM, OSUblake said: 😄 Probably the best character ever written 1 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