useWillChange
Automatically manage the will-change CSS property to optimise performance.
Note: This hook is deprecated. Although it will still work as documented, from version 11.3 Framer Motion will now automatically manage will-change
.
The CSS will-change
property can be used to tell the browser which styles it should expect to change, allowing it to optimise for that use-case.
useWillChange
returns a motion value that will automatically manage the will-change
style.
However, if you encounter rendering artifacts because the browser is improperly repainting the page, or performance issues related to animating other styles, useWillChange
can help.
#Usage
Import from Framer Motion.
import { useWillChange } from "framer-motion"
Create a willChange
motion value and provide to a <motion>
component via style:
function Component() { const willChange = useWillChange() return ( <motion.div animate={{ scale: 2 }} style={{ willChange }} /> )}
#How it works
Motion values provided via style
will always be named in will-change
as they may change at any time.
function Component() { const willChange = useWillChange() const x = useMotionValue(100) return ( <motion.div animate={{ x }} style={{ willChange }} // will-change: transform /> )}
All other values will only be named before they start animating, and removed when they finish animating.
function Component() { const willChange = useWillChange() return ( <motion.div whileHover={{ opacity: 0.9 }} // will-change: auto until hover starts/ends style={{ willChange }} /> )}
useWillChange
removes values as soon as it's safe in order to free up resources back to the browser.