Jump to content
Search Community

Tweening 'x' laggy in Firefox and Safari

atomboy test
Moderator Tag

Go to solution Solved by Carl,

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,

 

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

  • Solution

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.
×
×
  • Create New...