Jump to content
Search Community

Performance with large SVG files

gabrielstuff test
Moderator Tag

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 there,


I'm playing with the TweenMax API and I encounter some difficulties.

I aim to animate a full svg. I use a basic Tween for test puprose


TweenMax.to($('#' + 'front_side_down'), 1, { opacity: 1, display: 'inline' })


When the SVG does not contain much nodes, it runs smoothly and nicely. But when I hit more than 1000 groups node of svg path the animation got choppy.


I wonder why it influence anything, as in any case we only target one element...


Any help would be much appreciate !


Thanks ! 


P.S : I'm talking about a 3.5mo SVG file

Edited by gabrielstuff
Link to comment
Share on other sites

Hmm, its very difficult to imagine how your very large svg is animating. A CodePen demo would be great.


From what you describe, "complex image choppy, simple image smooth" it seems pretty clear this is a browser rendering issue that has little to do with GSAP.

TweenMax is simply animating a single number from 0 to 1. Its the browser that is having trouble rendering the opacity change. 

It sounds like the browser is trying to parse and render all the path calculations on each update. You might try adding force3D:true to your tween like

TweenMax.to($('#' + 'front_side_down'), 1, { opacity: 1, display: 'inline', force3D:true })

In modern browers this will put the image on a GPU layer and may rasterize it which in turn may make it render quicker.

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