Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Tweening 'x' laggy in Firefox and Safari

Recommended Posts



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.

Link to comment
Share on other sites

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?

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