Type custom properties

Register a variable with @property so it interpolates, not swaps.

From design-motion-principles, cookbook §7. See MDN @property ↗.

Typed vs untyped

Untick the checkbox to strip the type from the right dial.

UntypedBad

--hue 0

--hue: 0 → 360 at 50%
Registered <number>Good

--hue 0

syntax: '<number>'
@property --hue {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

Transition a gradient’s angle

Tap the rotate buttons, rapidly if you like.

UntypedBad
transition: --angle
Registered <angle>Good
syntax: '<angle>'

Transition a color

Pick a color; the registered glow blends, the other jumps.

UntypedBad
Publish
transition: --glow
Registered <color>Good
Publish
syntax: '<color>'

Why it matters, pros and cons

Why it matters

An unregistered variable is a string, and strings can't interpolate.

Pros

  • Animates gradient angles, stops and colors
  • One variable drives many properties
  • Invalid values fall back to initial-value

Cons

  • Gradients and shadows repaint on every frame
  • Registration is global; prefix names to avoid collisions
  • Skip it when transform or opacity suffices