Jump to content
GreenSock

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

TweenLite drawSVG being slow

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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.

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