Performance question: Which performs better backgroundPosition vs x?

[SimonWidjaja]

I need to create an infinite horizontal full-width slide animation.

I have a general question regarding performance. I know that the "white listed" high performance properties like transform, opacity should always be preferred. But I didn't find any information on the performance of animating backgroundPosition. Good idea or bad idea? 

Especially if the element is pretty huge (e.g. 2560x400px). Not sure if that makes a difference in context of backgroundPosition...

Thanks in advance!

[Cassie]

Hey Simon!

 

Thanks for being a club GreenSock member. 🥳

This is always my go to for these kind of questions...

https://csstriggers.com/background-image

 

Quote

 

Changing background-image does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

[SimonWidjaja]

Hey Cassie! Thanks for the quick response and the extremely useful link. I am not a performance expert, but that table tells me that animating backgroundPosition will result in more heavy lifting and more animation janks than moving the entire element via transform/translate, because it will add additional painting that is not needed with translates... Is this interpretation correct? Thanks again. Highly appreciated!

[Cassie]

That's right!