# useWillChange > Auto-managed CSS will-change that starts at auto and latches to transform after a qualifying animation. **Source:** [https://motion.svelte.page/examples/use-will-change](https://motion.svelte.page/examples/use-will-change) **Markdown mirror:** [https://motion.svelte.page/examples/use-will-change.md](https://motion.svelte.page/examples/use-will-change.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: will-change, only when needed. `will-change` is an invisible hint — the motion looks identical with or without it, so watch each box’s badge. Both start at `auto`. The left box animates `x` (a transform) and latches to `transform`; the right box animates `backgroundColor` (paint only) and stays at `auto` — no needless layer promotion. **Metadata:** tag: `PERFORMANCE` | api: `useWillChange` | input: `style={{ willChange }}` | mode: `live` ### Notes - The hook returns a MotionValue assigned to `style.willChange`, starting at `auto`. - When a transform (or accelerated) property animates, the runtime flips the value to `transform`. - Non-transform animations (e.g. `backgroundColor`) leave it at `auto` — no needless layer promotion. ### Source #### Default.svelte Source file: [src/lib/examples/use-will-change/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/use-will-change/demos/Default.svelte) ```svelte

// usewillchange will-change: {moveWillChange.current} · {paintWillChange.current}

promotes Animating x (transform)

will-change {moveWillChange.current}

{moved ? 'Return' : 'Animate x'}

stays auto Animating backgroundColor (paint)

will-change {paintWillChange.current}

(recolored = !recolored)} whileHover={buttonHover} whileTap={buttonTap} transition={buttonTransition} style={buttonStyle} > {recolored ? 'Reset' : 'Animate color'}

transform promotes · paint stays auto hook: usewillchange

```