Jump to content
GreenSock

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

SVG looped animation jumpy/jittery/laggy not so smooth

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×