Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lw1990

GSAP on mobile?

Recommended Posts

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
image.thumb.png.5eddbda4e3134989146e0e60eb001a2e.png

See the Pen create-svg-game-coloron by gregh (@gregh) on CodePen

Link to comment
Share on other sites

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...

 

giphy.gif.b9b922da2e510d2985074d1aaeda8ff1.gif

 

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.

 

  • Like 7
Link to comment
Share on other sites

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

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 😉

 

  • Like 4
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...
On 2/25/2020 at 8:15 AM, OSUblake said:

 

giphy.gif.b9b922da2e510d2985074d1aaeda8ff1.gif

 


😄 Probably the best character ever written
 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×