Jump to content
GreenSock

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

Tweening 'x' laggy in Firefox and Safari

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.

Share this post


Link to post
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

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×