loading code fetching the highlighted snippet
FIG-001/ PERFORMANCE
will-change, only when needed.
will-change is an invisible hint — the motion looks identical with or without it, so watch each box’s badge. Both start at auto. The left box animates x (a transform) and latches to transform; the right box animates backgroundColor (paint only) and stays at auto — no needless layer promotion.
- The hook returns a MotionValue assigned to
style.willChange, starting atauto. - When a transform (or accelerated) property animates, the runtime flips the value to
transform. - Non-transform animations (e.g.
backgroundColor) leave it atauto— no needless layer promotion.
x (transform)will-change auto
backgroundColor (paint)will-change auto
category · performance
sheet · sheet 01 / 01
⟳ to re-run