irregular fps timeline graph

[gyofeel]

I use TweenLite and useFrames:true for scrolling caroseul UI(lists of images).

Also, because of low performance of environment,  use TweenLite.fps for setting fps as 20.

 

when deveploping, I often use a performace tab of Chrome development tools.

For a performace test, after recording performance, I expected a flat timeline graph line.

However, the result is a rugged line.(min: about 20fps, max: about 60fps)

like a below image,

 

when this carosuel UI scrolling, component mounting(image components), image lazy-loading, scrolling animation and image scale-up(transform) are done together.

 

Why is the fps not constant?

 

Thank you.

 

[OSUblake]

Look at all those orange/yellow peaks underneath the frames. You have a bunch of scripting going on.

 

Scrolling is a performance killer. So is mounting stuff. 

 

 

[gyofeel]

Thank you for your replying.

 

Then, I have a question.

I understand that ,even though I fixed the fps to 20 using TweenLite.fps(),  a scrolling animation make a fps changing.

So, I think when a container scrolling, fps is under 20, otherwise fps is 20.

 

I checked the fps timeline and scene with the screenshot function on the performance tab.

Then, when a container moving(scrolling), fps is about 20 ~ 60, otherwise fps is about 20.

Rather, fps is higher.

 

Why is that?

[OSUblake]

I don't know how you are doing your scrolling animations. Are you using ScrollMagic? That uses requestAnimationFrame, which fires at 60fps. You can't change that.