Interactivity

Will Change

Utilities for optimizing upcoming animations of elements that are expected to change.

Partially Unsupported

Some of this functionality is not yet supported! If you need this, reach out to us on #nmp-warp-design-system.

Quick reference

Class	Description
will-change-auto	will-change: auto
will-change-scroll	Unsupported
will-change-contents	Unsupported
will-change-transform	will-change: transform

Basic usage

Warning

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.

Optimizing with will change

Use will-change-transform 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.

<div class="overflow-auto will-change-transform">
  <!-- ... -->
</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.