Will Change

Hint browser about upcoming changes

Syntax

visual="will-change:[value]"

Values

Value	CSS Output	Description
auto	will-change: auto	Auto optimization
scroll	will-change: scroll-position	Scroll changes
contents	will-change: contents	Content changes
transform	will-change: transform	Transform changes
opacity	will-change: opacity	Opacity changes

Examples

<div visual="will-change:transform">Optimized for animation</div>

Preview

Will Change

visual="will-change:transform" - Optimize for upcoming changes

transform

opacity

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small">transform</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">opacity</div>
</div>