DrawSVG Slow Down everything if run repeatedly

[m4g1c14n]

I have made sure that the path in question is never ever drawn above 100% and or below 0%, so it is ALWAYS within the value of 0% ~ 100%.

 

The slow down is really really apparent, just let the codepen above run and see the fps plummet, if you are using a very fast rig, you can decrease interval to execute the animation faster

 

I dont know if the problem exists when I am using the Tweenlite.to() instead, but I can not be using this due to : 

1. As you can see the animation in question must be run over an unlimited loop, and the drawSVG can not draw above 100% , such the drawSVG ("95% 105%") will always instead drawSVG("95% 100%")
2. I need to alter the acceleration of the animation based on the position of the mouse, it might even run backward if the acceleration went below 0 (deceleration) 

I wonder what is the work around for this problem, should I instead be drawing the SVG on my canvas instead?

 

Although I have been ShockinglyGreen member for almost a year now, but I have just started tinkering with GreenSock library just now, I am a complete newbie, any input is warmly welcomed

See the Pen MwEwmQ by m4g1c14n (@m4g1c14n) on CodePen

[Carl]

Hi and welcome to the GreenSock forums (and a late welcome to the Club!)

 

I think the problems you were seeing revolve mostly around how you were firing 2 separate setInverval() calls at very very rapid intervals and although I didn't dig deep I think the fps counter was misleading as the animation looked fine even when the fps appeared to drop.

 

setInterval() has a bit of a reputation for being unreliable so I dropped in Mr. Doobs stats script

 

http://codepen.io/GreenSock/pen/XbeXgR

 

I saw a steady 60fps for at least a few minutes. Does it look better on your end?

[m4g1c14n]

Hi Carl,

 

Thank you for your reply

 

Apparently , you are using a very fast rig, and the Stats Script is capped at 60fps, is it possible for you uncap the stats detection to see your maximum fps, you will definitely see the drop  (Let it run for lets say 1 minute ~ 2 minutes, you should see it, because it is really2 apparent)

 

I am using Intel Q6600 , quite old I know, but my max fps is around 59~60fps, and yes I did see a significant decrease in fps, after I let the script runs for a while

 

I have tested it on Intel Q6600, Windows 8 PC

Firefox 38.0.5

Chrome 43.0.2357

See the Attached GraduallySlower.png

 

IE 10.0.9200

See the Attached GraduallySlower2.png

On IE the slow down is much faster

 

I have also tested in on my Moto E First Generation

Chrome 43.0.2357

And yes I do still see the Gradual Slowdown in FPS (starting at 25fps, after 30 seconds ~ 1 minute, the fps stars to slow down to around 18fps)

 

 

[m4g1c14n]

PS : I forgot to thank you , for sharing the stats library and also the new EXTREMELY handy method of TweenMax.delayedCall xD

 

By the way, to be fair although I am new with the GreenSock JS , I used to develop a Flash Website using GreenSock library AS3

 

https://www.ikt.co.id

 

It is really good to see, that greensock never failed to amaze the **** out of me right now as it was 5 years+ ago

[m4g1c14n]

anybody?

[Carl]

Sorry. From your previous post I wasn't aware there was still an issue.

 

Do you have an updated pen that isn't running setIntervals every 10 ms?

 

Not sure what you mean by capping fps at 60? Anything higher is wasteful and that is the rate requestAnimationFrame tries to achieve.

[Carl]

ok, after further review I think I have a better understanding of the problem.

 

Here is a reduced test of 2 DrawSVG tweens running infinitely. Please monitor the performance and see if there is any slow down over time.

http://codepen.io/anon/pen/ZGaOdz

 

There is really no problem with DrawSVGPlugin or GSAP that I can sense.

 

However, in your demo you are calling a function every 10ms that adds a new set() to an existing timeline at exactly the same time as other set()s.

 

A TimelineLite.set() creates a tween with no duration. When a tween is created (even one with no duration) the engine needs to query the existing values of the properties you are modifying, record them and also apply the new values.  In addition the engine needs to check if the set() is modifying properties that are controlled by other tweens and then kill() those tweens when it finds a conflict. In short it can be fairly CPU intensive – especially if you are doing a lot of these in succession.

 

I believe your code, over time was creating 10s of thousands of 0 duration tweens in the same timeline.

 

Please try not using a timeline for this, just use TweenLite.set() 

 

see if this works any better:

 

http://codepen.io/GreenSock/pen/VLrKaM

[m4g1c14n]

Ahhhhh, that makes a lot of sense... 

It works flawlessly now....

 

Yup2, I should have used the Tween.set instead of Timeline.set , because the Timeline.set added the additional "Keyframe" (in Flash IDE Language)

even thought the keyframe run only 1 frame (no duration) ... of course that would need to use a hefty amount of memory if you add that many keyframe per second for a while

 

Thanks a lot......

[Carl]

You're welcome. I'm glad we have a solid resolution.