SVG looped animation jumpy/jittery/laggy not so smooth

[MugenFTW]

Hi there Green Sock!

 

I'm having a hard time getting this animation to run smoothly, it's a bit jumpy at times and not as smooth as I would like it to be. I have tried adding in rotation and Z related options that don't seem to have much affect.

 

I have other GSAP + ScrollMagic animations happening on the page too which won't be helping the performance either.

 

I'm not sure if there's just too much going on for this to ever run buttery smooth? Any suggestions? Is canvas the answer? (i.e. PixiJS + GSAP?)

 

Thanks, Anthony

See the Pen RwwJVRv by MugenFTW (@MugenFTW) on CodePen

[ZachSaucier]

Hey Mugen and welcome to the GreenSock forums.

 

This is unrelated to GSAP, but we'll help where we can. Partially opaque elements and filters are very performance intensive, especially to animate. You are using a lot of those things, so you can't really expect your animation to work great  

 

I'd try to rethink through how you're setting things up to avoid those things. Maybe even use layered images (not SVGs) or something.

[Jonathan]

Hey @MugenFTW

 

Keep in mind that force3d: true, z, and rotationZ won't really work on SVG, since those CSS hacks wont work on SVG. This is because SVG does not fully support 3D transforms, only 2D transforms.

 

You also might want to run your SVG through an online optimizer to make sure it is optimized and cleaned up of any shenanigans.

 

https://jakearchibald.github.io/svgomg/ (Don't forget to un-toggle Clean ID's)

 

Also you might want to reduce the amount of <paths>, or like @ZachSaucier advised use layered image, or even maybe a mix of SVG and images. This way you don't have so many SVG elements to animate. But regular non SVG elements, like <div> tags or <img> tags can take advantage of 3D transforms so you can animate on a sub-pixel level for silky smoothness.

 

[MugenFTW]

Thanks for your response guys! I've achieved the effect I was after by using a mix of SVG's and images for parts as advised. I had already run the SVG through SVGOMG so there wasn't much to gain there but after replacing the counter parts with an image a saw a massive improvement. I'll post a link here when it's all finished

 

Thanks Anthony

[MugenFTW]

Hello!

 

Thanks for the help guys! As promised here is the link to the finished effect: https://www.seaquake.io/

 

Thanks again, Anthony