Simple SVG path animation slowdown on site vs codepen

[wijwoj]

Hi folks,

 

So I'm pretty new to green sock, so please be gentle, but I'm trying to figure out why my simple atom animation absolutely runs like a dog in chrome on the actual site it is due to go on versus the codepen version. The cpu usage in chrome spikes around 50% when viewed on my site but sits around 30-35%, which just seems insane when the codepen barely breaks 5-10%. 

 

All other browsers seem pretty reasonable (not much more than 5-10% cpu usage)

 

The site version - might have to refresh as ngrok seems to be being a bit funny:

http://3c225cbe.ngrok.io/

 

The full screen codepen:

http://codepen.io/wijwoj/debug/VPrepv

 

 

The svg is included as an object on the site vs being inline on the code, but i can't imagine that will make much difference on its own. I have absolutely stripped the site page back to a minimum of other scripts/stuff going on to try and identify what could be interfering/causing the slowdown.

 

Can anybody shed any light on what is going on?

Cheers in advance,

 

Wij.

 

See the Pen VPrepv by wijwoj (@wijwoj) on CodePen

[OSUblake]

Using an object can cause problems. Check out this thread for an easy way to load an external SVG using jQuery...

https://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586

 

That said, I don't think the object would slow things down that much. You have a bunch of CSS transitions on almost all of your elements. If I remove those and the box-shadow, the cpu usage drops considerably. I think your animation may be causing everything to be repainted, and box-shadows are expensive to repaint.

 

To speed things up with a box shadow, see if forcing the svg container onto it's own rendering layer helps.

TweenLite.set(".container", { force3D: true });

.

[wijwoj]

Thanks Blake, despite having read that thread I didn't pick up that the ajax inline method might speed things up somehow. 

 

I've now updated the site and loaded the svg inline via ajax and the cpu used has dropped to 10-15% which is a bit more respectable. Taking all the css transitions out doesn't seem to make much difference and they are required for the complex mobile menu which I've temporarily removed.

 

I'm happy with the improvement though.

http://3c225cbe.ngrok.io/

 

Cheers,

Wij.