TweenLite drawSVG being slow

[iroller]

I have relatively big SVG that I'm animating with TweenLite - drawSVG.

 

The problem is I can't make it going smoothly - it always being slow and intermittent first 1-2 seconds and proceeding fine on 3-4th second.

 

I've tried adding delays to make it wait until the whole page is loaded, but it doesn't give much difference. Also tried renaming 50% of .style0 classes in SVG into another class and making it non-animated and visible from the beginning - not much difference as well, first 2 second of loading are still laggy.

 

I'm looking for a way to make it smoother without editing SVG itself.

 

I'm using the following code to animate it:

jQuery(document).ready(function($){

  TweenLite.set(".style0", {visibility:"visible"});

  var tl = new TimelineLite();

  tl.fromTo(".style0", 4, {drawSVG:0}, {drawSVG:"102%"}, "-=1");

  TweenLite.render();

});

See the Pen QbbBBb by iroller (@iroller) on CodePen

[Diaco]

Hi iroller 

 

you need to load DrawSVGPlugin.js too in your codepen , and pls try this : 

See the Pen ZGGjqL by MAW (@MAW) on CodePen

[iroller]

Hi iroller 

 

you need to load DrawSVGPlugin.js too in your codepen , and pls try this : 

See the Pen ZGGjqL by MAW (@MAW) on CodePen

 

Hello-hello. Thanks, added!

 

Switched to TweenMax per your suggestion - still not 100% smooth, but better

[Diaco]

Certainly there's difference when you .set() one element Instead of a lot of elements with a className

 

by the way i think maybe this can help you too : Performance Test of lagSmoothing() and lazy

[GreenSock]

It looks like there are some scripts on your page that are eating up a ton of resources, especially when the page initially loads. Like www-embed-player.js. It's beyond the scope of what we can provide here in the GreenSock forums, but I'd encourage you to dig into using Chrome's Dev Tools timeline to analyze the performance metrics. 

 

Beyond that, though, your animation is demanding a LOT from the browser in terms of graphics rendering (which is unrelated to GSAP). SVG can already be CPU-intensive to render (it has to do all the math for the paths, convert them to pixels, etc.). It's usually best to keep the area of change to the minimal amount. Your animation requires pretty much the entire top portion of the page to get re-rendered on every frame. Again, it's not really a GSAP issue as much as it is a browser rendering one. If you do a timeline recording, you'll see that GSAP's JavaScript execution accounts for a relatively tiny portion of the overall workload, whereas paint and layout tasks are much more significant. Although like I said, when your page starts you've got some JavaScript code that's eating up a TON of resources. I'd definitely investigate what's going on there. 

[iroller]

It looks like there are some scripts on your page that are eating up a ton of resources, especially when the page initially loads. Like www-embed-player.js. It's beyond the scope of what we can provide here in the GreenSock forums, but I'd encourage you to dig into using Chrome's Dev Tools timeline to analyze the performance metrics. 

 

Beyond that, though, your animation is demanding a LOT from the browser in terms of graphics rendering (which is unrelated to GSAP). SVG can already be CPU-intensive to render (it has to do all the math for the paths, convert them to pixels, etc.). It's usually best to keep the area of change to the minimal amount. Your animation requires pretty much the entire top portion of the page to get re-rendered on every frame. Again, it's not really a GSAP issue as much as it is a browser rendering one. If you do a timeline recording, you'll see that GSAP's JavaScript execution accounts for a relatively tiny portion of the overall workload, whereas paint and layout tasks are much more significant. Although like I said, when your page starts you've got some JavaScript code that's eating up a TON of resources. I'd definitely investigate what's going on there. 

 

Thanks for suggestions. I'll dig into scripts on my page and try to simplify the SVG.