---
title: Will Change
position: 10
seo_title: Telerik and Kendo UI Will Change Utilities
seo_description: The Telerik and Kendo UI Will Change utilities to optimize
  browser performance by hinting at elements that will change.
---

## Will Change

The Telerik and Kendo UI Will Change Utilities are CSS utility classes that enable you to optimize browser performance by providing hints about what kinds of changes the author expects to perform on an element.

<CSSRulesList data='{"id":"will-change"}'></CSSRulesList>

### Auto

Use the `k-will-change-auto` utility to let the browser decide what to optimize for. This is the default behavior.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/will-change/auto","height":150,"codePreviewSettings":{"filterSelector":".k-will-change-auto,.k-will-change-scroll,.k-will-change-contents,.k-will-change-transform"}}'></LiveDemo>

### Scroll

Use the `k-will-change-scroll` utility to hint that the element's scroll position will be animated or changed.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/will-change/scroll","height":150,"codePreviewSettings":{"filterSelector":".k-will-change-auto,.k-will-change-scroll,.k-will-change-contents,.k-will-change-transform"}}'></LiveDemo>

### Contents

Use the `k-will-change-contents` utility to hint that the element's contents are expected to change.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/will-change/contents","height":250,"codePreviewSettings":{"filterSelector":".k-will-change-auto,.k-will-change-scroll,.k-will-change-contents,.k-will-change-transform"}}'></LiveDemo>

### Transform

Use the `k-will-change-transform` utility to hint that the element will be transformed (translated, rotated, scaled, etc.).

<LiveDemo data='{"links":[],"demo":"utils/interactivity/will-change/transform","height":150,"codePreviewSettings":{"filterSelector":".k-will-change-auto,.k-will-change-scroll,.k-will-change-contents,.k-will-change-transform"}}'></LiveDemo>