Jump to content
Search Community

Why is this animation choppy?

yoshyosh 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

Yeah, it seems smooth to me, but you are pushing the browser really hard in terms of rendering. SVG requires the browser to fabricate all the pixels dynamically because they're resolution-independent, and you've got a very large area of change. It has nothing to do with GSAP - I'd bet that the work GSAP does is less than 1% of the overall load - the rest is the browser having to rasterize & paint all those pixels on every tick. A few tips:

  • Avoid strokes and fancy linecaps. They're expensive rendering-wise. 
  • Limit the area of change. The more pixels that need to be updated, the tougher it is on the browser. 
  • Switch to <canvas> if you need better rendering performance. Maybe even experiment with using regular DOM elements like <div> and <img> to create your objects because those can be GPU-accelerated whereas SVG typically can't. 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

34 minutes ago, Shaun Gorneau said:

Hi @yoshyosh! Welcome to GSAP :)

 

What are you reviewing this in? FWIW, everything looks very good here in Safari, Chrome, and Firefox in MacOS.

Thank  you! I'm viewing this in chrome, it could also have to do with my machine being a little slow. Old macbook air :)

Link to comment
Share on other sites

6 minutes ago, GreenSock said:

Yeah, it seems smooth to me, but you are pushing the browser really hard in terms of rendering. SVG requires the browser to fabricate all the pixels dynamically because they're resolution-independent, and you've got a very large area of change. It has nothing to do with GSAP - I'd bet that the work GSAP does is less than 1% of the overall load - the rest is the browser having to rasterize & paint all those pixels on every tick. A few tips:

  • Avoid strokes and fancy linecaps. They're expensive rendering-wise. 
  • Limit the area of change. The more pixels that need to be updated, the tougher it is on the browser. 
  • Switch to <canvas> if you need better rendering performance. Maybe even experiment with using regular DOM elements like <div> and <img> to create your objects because those can be GPU-accelerated whereas SVG typically can't. 

Happy tweening!

Thanks for the tips! Good to know theres nothing with GSAP, i'll try more variations of rendering the SVG and these elements. The size of it likely plays a big role.

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