Simple SVG animations are choppy

[skribbz14]

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:
http://guzu.looseygooseyart.com/home.php
 
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. 

 

[GreenSock]

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.