Jump to content
Search Community

Morph SVG slow on mobile

selvinkuik test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a moderately complex animation running here: http://178.62.48.108/play

 

On desktop, everything runs very smoothly. However, on mobile devices the animation is slightly jittery.

 

The whole animation is composed using Morph SVG. There are 5 main elements of the animation and 14 keyframes, please feel free to inspect the JS to see.

 

This is one of my first Greensock animations, so I would be keen to learn how this type of animation can be optimised.

See the Pen by play (@play) on CodePen

Link to comment
Share on other sites

Also keep in mind that typically with SVG animations (and actually most other ones too), the biggest performance bottleneck BY FAR is graphics rendering which is totally unrelated to GSAP. For example, it may take 3% of the CPU resources for GSAP to update the numerical values, but then the browser may take 97% to visually render the new shape in the browser. So even if GSAP suddenly became 1,000% faster, the animation would only run roughly 2% faster overall. 

 

Vector graphics are just tough for the browser to render 60x per second because it's basically fabricating the pixels every time. It's much different than raster images which can just be stored on the GPU and moved as a whole in an optimized way. Again, none of that is related to GSAP. So it's not surprising to hear that on devices with slower processors (mobile devices), SVG animations aren't as smooth. I wish there was something magical we could optimize for you. But Diaco linked to a post that shows our best effort at optimizing the things that are within our control. 

  • Like 4
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.
×
×
  • Create New...