Specific question about MorphSVG animation being jumpy on mobile

[MadG]

Hey all. I have a mock website up on Heroku right now and trying to do some finishing touches on troubleshooting. The site is hyvolt.herokuapp.com. If you visit on mobile, select "Solutions" from the nav menu, then swipe right, you'll see the animation in question. It's a pretty complex combination of zoom, positioning, and morphSVG tweens, and for everyone on our team the animation is a little glitchy on iOS Safari in particular. Any suggestions on how we may be able to smooth that out a bit? 

[nico fonseca]

Hey @MadG, welcome to the forum! 💚
I saw your site and I found some things you can do to improve the performance.
- DON'T animate left, top, width, height properties, instead use always transform property.

- Optimize your lottie files, you have a lot of elements in the DOM. Try to compress SVG files using for example SVGO.  
- Load your lottie animations when you needed, right now you load a lot of animation although they are not visible. 

- You can also export only the elements you'll animate and leave the rest as static SVG elements.
- Try to find another way to export your animations because you are using a PNG sequence, so for example for one animation you have 200 base64 images.
- You can zoom the SVG animating the viewbox attribute. You can check these amazing examples made by @OSUblake and @PointC

https://www.motiontricks.com/basic-svg-viewbox-animation/

See the Pen oGoyYb by osublake (@osublake) on CodePen

[MadG]

Awesome, thanks for the extra review and advice! I think the lottie stuff may be out of my hands - my on-staff animator is already a little fed-up with me, lol. I had asked about exporting as SVG instead of PNG and he said he was having trouble because of the complexity of some of the gradients and such. I will definitely go through and remove my top/left/height/width stuff though, and I'll see what I can do about maybe only getting lottie files for the animated elements. 

[Cassie]

That's a really thorough list Nico. Champion! 🏆

[MadG]

@nico fonseca just for my own education, why is it a no-no to animate the parameters you listed above? 

[OSUblake]

1 hour ago, MadG said:

just for my own education, why is it a no-no to animate the parameters you listed above? 

 

It's kind of an old topic, but you can read about it here. Transforms perform better and don't snap to pixel values.

https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

 

left and top can almost always be replaced with x and y. Replacing width and height with scale may not work in every situation. Sometimes you have to get really creative. 😉

 

[MadG]

@OSUblake thanks! Yeah, I was able to pretty easily replace my left and top. If the client will give me enough time to do so, I'm going to try the viewBox animation recommended above, which looks very nifty. Thanks for your help!