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.

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

Values that are capable of hardware acceleration (transform, opacity, clip-path and filter) will be added to will-change just before they start animating.

function Component() {
  const willChange = useWillChange()
  
  return (
    <motion.div
      animate={{ x: 100 }}
      style={{ willChange }} // will-change: transform
    />
  )
}