0

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?

user4675957
  • 233
  • 2
  • 3
  • 12

1 Answers1

0

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.

Tania Rascia
  • 1,563
  • 17
  • 35
  • Thank you for answer, but i think you are wrong. This shows that position properties can be used: https://developer.mozilla.org/en/docs/Web/CSS/will-change I have tried using transform but the problem is that when i use transform, padding-right transition is not fluid as i want to add right padding to container so that content stays in page and doesn't leave page – user4675957 Dec 05 '15 at 08:18
  • They can be used, any animateable property can be used, that doesn't mean that the browser can properly prepare for or hardware accelerate them. Padding-right is another property that can't be hardware accelerated. Check out https://csstriggers.com/ and Behold The Consequences Of Your Actions. Any property here that can be done on the compositor alone opens the potential for hardware acceleration. – Different55 Apr 09 '22 at 18:28