useWillChange

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.

Note: It's likely you don't need to use this hook. Framer Motion already animates transform in the most optimal way and over-application of will-change may have an adverse effect on performance.

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.