Jump to content
Search Community

SVG looped animation jumpy/jittery/laggy not so smooth

MugenFTW test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.



  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

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