Motion
Back to framer.com
DocumentationMotion values
useWillChange
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Utilities
  • animate
  • transform
  • useAnimationControls
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

useWillChange

Automatically manage the will-change CSS property to optimise performance.

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.

PrevioususeVelocityNextanimate
On this page
  • Usage
  • How it works

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement