# useWillChange > Auto-managed CSS will-change that starts at auto and latches to transform after a qualifying animation. **Source:** [https://motion.svelte.page/docs/use-will-change](https://motion.svelte.page/docs/use-will-change) --- `useWillChange()` returns a MotionValue you assign to an element's `style.willChange`. It manages its own value: it stays `auto` until a transform or accelerated property animates on that element, then flips to `transform`. Setting `will-change` permanently forces the browser to keep an element on its own compositor layer — which costs memory. `useWillChange` starts at `auto` and flips to `transform` when a transform or accelerated property animates, then stays latched — avoiding eager promotion before first use while still capturing the compositor win once it's needed. Mirrors framer-motion's `useWillChange`. ```svelte ``` > Live example: [/examples/use-will-change](https://motion.svelte.page/examples/use-will-change) ## How it works Assign the value through object-form `style`. As animations start, the motion runtime notifies the value which keys are animating: - A transform shortcut (`x`, `y`, `scale`, `rotate`, …) or an accelerated value (e.g. `opacity`) flips `will-change` to `transform`. - Any other property (e.g. `backgroundColor`) leaves it at `auto`. Once flipped, the hint stays `transform` — there's no benefit to thrashing it back to `auto` between animations. ## API Reference ### `useWillChange` ```ts function useWillChange(): WillChangeMotionValue ``` Returns a `MotionValue` (so it composes with object-form `style`) with an extra `add(name)` method the runtime calls as animations start. Assign it to `style.willChange`. Based on [Motion's useWillChange hook](https://motion.dev/docs/react-use-will-change).