will-change

Examples#

Optimizing with will change#

Use the will-change-scroll, will-change-contents and will-change-transform utilities to optimize an element that's expected to change in the near future by instructing the browser to prepare the necessary animation before it actually begins:

<!-- [!code classes:will-change-scroll] -->
<div class="overflow-auto will-change-scroll">
  <!-- ... -->
</div>

It's recommended that you apply these utilities just before an element changes, and then remove it shortly after it finishes using will-change-auto.

The will-change property is intended to be used as a last resort when dealing with known performance problems. Avoid using these utilities too much, or simply in anticipation of performance issues, as it could actually cause the page to be less performant.

Using a custom value#

<UsingACustomValue utility="will-change" name={ <> will-change property </> } value="top,left" variable="properties" />