will-change css usage on transition

Question

i am trying to use will-change to make an animation perform better. I have a page-container that would animate left and padding-right in order to move and reveal side menu.

.page-container {
    background: #f4f4f4;
    height: 100%;
    left: 0;
    padding-right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1001;
    will-change: left, padding-right;
    transition: left 0.4s ease-out, padding-right 0.4s ease-out;
    } 

When button is clicked to move container/show menu, a class is added to container parent and css is changed to:

.page-wrapper.menu-opened .page-container {
            left: 240px;
            padding-right: 240px;
            }   

will-change doesn't seem to have any impact. Am i using it right, or how it should be used?

Answer 1

Use transform: translateX(240px) instead of left: 240px. The reason this doesn't perform well is that the position property doesn't support hardware acceleration, while the transform property does.

Here is an example of translateX in action for a menu opening/closing.