Jump to content


Simple SVG animations are choppy

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

Hi, I'm having some issues with some simple rotation animations in all browsers. They are inconsistently choppy and I do not understand why. I have done significantly more complex animations on other sites without any trouble, so I'm just puzzled as to what the issue is. 
You can view the animations here:
I am referring to the section that shows a box closing it's doors and then sliding off. At times it runs perfect and others not so perfect.
My javascript for the animation is as follows:

function Close_Doors(){
  var anim_rotation = 135,
      anim_duration = 0.35,
      anim_easing = Power1.easeIn,
      anim_delay = 2.05;
  TweenMax.to('#left_door', anim_duration, { rotation:anim_rotation, transformOrigin:"bottom right", ease:anim_easing, delay:anim_delay, force3D:true });

  TweenMax.to('#right_door', anim_duration, { rotation:-(anim_rotation), transformOrigin:"bottom left", ease:anim_easing, delay:anim_delay, force3D:true });		

  TweenMax.to('.package', 2, { delay:2.8, x:1000, ease:anim_easing, force3D:true });


As you can see I am forcing 3d acceleration, which seems to be the "go to" solution throughout the forums. 


Link to comment
Share on other sites

Unfortunately, I'm pretty sure that none of the browsers hardware-accelerate SVG elements, so force3D:true doesn't really gain you anything when it comes to SVG. That's unrelated to GSAP - it's just a browser thing. Vectors are almost always more processor-intensive to render anyway. Flash had the same issue which is why they created a cacheAsBitmap setting that basically allowed you to say "rasterize my element and lock in the pixels so you don't have to keep re-rendering them on every screen refresh". The down side, of course, is that rasterized images are just rows/columns of pixels, thus if you scale them up, things get blurry/pixelated. 


I'm not sure if it's feasible in your particular project, but have you tried using "regular" images/elements instead of SVG? I suspect you'd see a performance improvement. 


For what it's worth, things seemed to animate quite nicely for me when I went to that URL. I didn't notice any weird jank. 


Lastly, I'm curious if this helps you at all - try running this line of code once when your page loads:

CSSPlugin.useSVGTransformAttr = true;

It's an undocumented tweak that *might* help, but I kinda doubt it. I'm curious to hear if you notice any difference. 


Oh, and please make sure you're using the latest version of GSAP (released today). 1.16.1. The CDN hasn't been updated yet though, so you'll need to just download the zip or snag the files from Github. 

  • Like 3
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.