# will-change

> Applies `will-change`, hinting the browser to optimize for an upcoming animation on the given property/properties before it starts.

```ts
import { willChange } from "@sdxc/u/general";
```

Applies `will-change`, hinting the browser to optimize for an upcoming
animation on the given property/properties before it starts.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.willChange("transform")` | `css({ willChange: "transform" })` |
| `u.willChange("opacity, transform")` | `css({ willChange: "opacity, transform" })` |

## Examples

### Basic example

Use `willChange(property)` to tell the browser which property is about to animate, so it can prepare before the change starts. Hover the card:

```tsx
<div mix={[willChange("transform"), transition("transform"), hover(scale(1.05)), ...]}>
	Spring collection · 24 new pieces
</div>
```

### Several properties

List several properties separated by commas, like `willChange("opacity, transform")`, when an animation changes more than one. Hover the photo:

```tsx
<div
	mix={[
		willChange("opacity, transform"),
		transition("opacity, transform"),
		hover([opacity(80), scale(1.05)]),
		is(64),
		bs(40),
		...,
	]}
/>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.willChange("transform"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.willChange("transform"))
```

## Signature

```ts
u.willChange(value: WillChangeValue)
```