CODEWITHSUNDEEP
javascripthtmlcsscss-animations
Vince
Vince

Reputation: 35

How to get 60 fps in css element width animation?

Is there any ways to get smooth 60fps in css animation, especially when you animating some elements width?

I have tried 3 ways and I got 60fps only with css transform: scale(), but this method is not very useful, because all child elements are stretching with parent container. I added scale(0.5) for child elements and that is canceled stretching, but I got some problems with absolute positioned elements.

When I used simple width animation, in big landing page I got drawdowns from 60 to 17 frames per second.

With changing flex-graw of current div, fps was 3-4.

Here is a simple example with low fps: https://jsfiddle.net/ucgwfetq/14/

In a big landing page with huge number of elements in each block, fps is muсh lower.

Upvotes: 2

Views: 2965

Answers (1)

MattDiamant
MattDiamant

Reputation: 8771

One thing that is going to be bringing your FPS down is that you're using multiple very large images, and then scaling them down with background-size: cover.

I'm not sure how many 1920x1080 images you're going to have on the screen at once, but with them all having their size calculated during animation, that's going to eat a lot of resources.

Also, putting transition: width .3s ease-out; on .block instead of .block-large is going to make it look smooth, regardless of FPS.

https://jsfiddle.net/ucgwfetq/16/

Upvotes: 1

Related Questions