Tweening 'x' laggy in Firefox and Safari

[atomboy 0 Likes (Newbie)]

Hi,

 

For a yet to be released project i am animating an really big SVG image which has PNG layers and some SVG elements. The entire SVG has a shocking size of 1.8Mb. I am animating the x position of 3 groups containing SVG and PNG elements with:

TweenLite.to("#group1", 1, {x:50})

// results in this element style when stopped animating:
"transform: matrix(1, 0, 0, 1, 0, 70);" data-svg-origin="307.8999938964844 6.610000133514404"

The animations looks smooth enough on very slow Windows machines with Chrome, IE & Edge but on Safari and Firefox it is stuttering and lagging to a point where the website looks to be loading in 1 frame per second.

 

What would be an good alternative or workaround to get it to work smooth across all browsers.

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

You might be better off putting the groups you are animating into separate svgs and then animate the position of the svgs.

SVGs don't offer hardware acceleration and the rendering speed can become an issue on larger more complex vectors. 

 

Really tough to say without actually seeing the animation and files you are talking about. Have a link we can see?