Jump to content
Search Community

Performance question: Which performs better backgroundPosition vs x?

SimonWidjaja test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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!

Link to comment
Share on other sites

  • Solution

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.

 

  • Like 2
Link to comment
Share on other sites

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!

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.
×
×
  • Create New...